我需要一个通用的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);
}
});
希望对大家有帮助