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

Question

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

这是我的 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;
    }



}

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

Answer 1

您需要使用 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>

Answer 2

HTML

  <div class="form-group col-md-2">
                            <label for="">Tipo de Compra</label>
                            <select name="" id="myList"class="form-control" required onchange="disable()">
                            <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">
                    <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>

JS

function disable(){
    if(document.getElementById('myList').value == 'Nacional'){
        document.getElementById('fob').disabled = true
    }
    else{
        document.getElementById('fob').disabled = false
    }
}

Answer 3

根据您对 JavaScript 的更新，您需要进行一些更改：

假设您想像其他函数一样内联 onchange 的 JavaScript 函数

这应该包括onChange="TipoCompra()" ：

//<select name="" class="form-control" id="tipoCompra" required>
<select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>

这应该禁用d ：

//fob.disable = true;
fob.disabled = true;

disabled="false"在您的输入中无效：

//<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required>
<input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>

http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

许多属性是布尔属性。 元素上布尔属性的存在表示真值，不存在该属性表示假值。

布尔属性不允许使用值“true”和“false”。 要表示假值，必须完全省略该属性。

功能示例。 注意：我删除了对 Todas(); 的调用。 功能，因为它没有包含在您的问题中。

 function TipoCompra(){ var tipoCompra = document.getElementById('tipoCompra').value; console.log(tipoCompra); var fob = document.getElementById('fob'); if (tipoCompra == 'Nacional'){ fob.disabled = true; } else { fob.disabled = false; } }

 <div class="form-group col-md-2"> <label for="">Tipo de Compra</label> <select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" 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"> <label for="fob">Costo Fob</label> <input type="number" step="00.01" id="fob" name="fob" class="form-control" required> </div>