时间戳

首页 > 解决方案 > 如何使用动态选择禁用输入字段？

javascript - 如何使用动态选择禁用输入字段？

问题描述

我想创建一个动态选择元素，如果我选择某个选项并且禁用特定的文本输入字段。

这是我的 HTML：

<div class="form-group col-md-2">
    <label for="">Tipo de Compra</label>
    <select name="" class="form-control" id="tipoCompra" required>
        <option value="">Tipo de compra </option>
        <option value="Nacional">Nacional</option>
        <option value="Exterior">Exterior</option>
    </select>
</div>

如果用户选择“Nacional”选项，我想禁用以下输入字段，以便他们无法输入任何值。

<div class="form-group col-md-2">
    <label for="fob">Costo Fob</label>
    <input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
</div>

我正在为我的函数和一些 Jquery 使用 JavaScript，但我不知道如何为此创建函数。

这是我的功能：

function TipoCompra(){

    var tipoCompra = document.getElementById('tipoCompra').value;

    console.log(tipoCompra);

    var fob = document.getElementById('fob');

    if (tipoCompra == 'Nacional'){
        fob.disable = true;
    } else {
        fob.disable = false;
    }



}

但我不知道如何更改禁用的属性。

标签： javascripthtmljquery

解决方案

您需要使用 jQuery 的更改功能检查您的选择的更改

https://api.jquery.com/change/

并检查您选择的值。

然后使用 prop 功能禁用您的元素。

https://api.jquery.com/prop/

$('#fob').prop('disabled', true);

$("select[name='test']").change(function() {
  let selectVal = $(this).val();

  if (selectVal == 'Nacional') {
    $('#fob').prop('disabled', false);
  } else {
    $('#fob').prop('disabled', true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
                        <label for="">Tipo de Compra</label>
                        <select name="test" class="form-control" required>
                        <option value="">Tipo de compra </option>
                        <option value="Nacional">Nacional</option>
                        <option value="Exterior">Exterior</option>
                        
                        
                        </select>
                    </div>

<div class="form-group col-md-2 costo">
                    <label for="fob">Costo Fob</label>
                    <input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
                </div>

推荐阅读