寻找Javascript函数来禁用指定的select-option字段

Looking for Javascript function to disable fields on specified select-option

本文关键字：select-option 字段 Javascript 函数 寻找      更新时间：2023-09-26

我需要一个通用的javascript函数来禁用/启用指定的select选项中的字段。

<select name="form">
 <option value="1">everything enabled</option>
 <option value="2">disable form-input 1 and 2</option>
 <option value="3">disable form-input 3, 4 and 5</option>
</select>

所以当选项2被选中时，输入表单1和2应该被禁用，以此类推。函数必须是通用的，这样选项值和要禁用的字段必须通过变量/数组提供给函数。

任何想法?

谢谢,亨宁

HTML

<select name="form" id="selector">
    <option value="1">everything enabled</option>
    <option value="2">disable form-input 1 and 2</option>
    <option value="3">disable form-input 3, 4 and 5</option>
</select>
<br/>
<input type="text" id="input1" class="inputs" />
<br/>
<input type="text" id="input2" class="inputs"  />
<br/>
<input type="text" id="input3" class="inputs"  />
<br/>
<input type="text" id="input4" class="inputs"  />
<br/>
<input type="text" id="input5" class="inputs"  />
JavaScript 

(function () {
    $('#selector').on('change', function (val) {
        var selectedVal = $(this).val();
        if (selectedVal == "1") {
            $('.inputs').removeAttr("disabled");
        } else if (selectedVal == "2") {
            $('inputs').removeAttr("disabled");
            $('#input1').attr("disabled", "disabled");
            $('#input2').attr("disabled", "disabled");
        } else if (selectedVal == "3") {
            $('.inputs').removeAttr("disabled");
            $('#input3').attr("disabled", "disabled");
            $('#input4').attr("disabled", "disabled");
            $('#input5').attr("disabled", "disabled");
        }
    });

})();

在这里，我使用JQuery轻松地完成了一些事情。您也可以使用纯JavaScript实现这一点。我使用.inputs类，这样我可以很容易地恢复disable属性

使用

 <select id="Drp" name="form">
     <option value="1">everything enabled</option>
     <option value="2">disable form-input 1 and 2</option>
     <option value="3">disable form-input 3, 4 and 5</option>
    </select>
<input type="text" id="form-input1" />
<input type="text" id="form-input2" />
<input type="text" id="form-input3" />
<input type="text" id="form-input4" />
<input type="text" id="form-input5" />
脚本

$("#Drp").change(function(){
var value = $("#Drp").val();
if(value==1){
$("input").prop('disabled', false);
}else if(value==2){
$("#form-input1,#form-input2").prop('disabled', true);
$("#form-input3,#form-input4,#form-input5").prop('disabled', false);
} else if(value==3){
$("#form-input1,#form-input2").prop('disabled', false);
$("#form-input3,#form-input4,#form-input5").prop('disabled', true);
}
});

希望对大家有帮助

相关文章：