我有 2 个选项:#home-none
和 #home-select
,当选择 #home-none 时,我希望所有输入都带有 类。 home
被禁用。
HTML:
选项
<select class="form-control">
<option id="home-none">-</option>
<option id="home-select">Team</option>
</select>
输入
<div class="form-group">
<input class="form-control home" name="h-p1-fn" placeholder="First name" type="text"/>
</div>
<div class="form-group">
<input class="form-control home" name="h-p1-ln" placeholder="Last name" type="text"/>
</div>
JS:
<script type="text/javascript">
$(document).ready(function(){
$("#home-select").click(function(){
$(".home").prop('disabled',true);
});
$("#home-none").click(function(){
$(".home").prop('disabled',true);
});
});
</script>
控制台不显示错误,但不起作用。
最佳答案
您连接到了错误的事件。请改用 select
的 change
事件。从那里您可以读取 option
元素的 value
属性,以将相关 input
元素设置为禁用。试试这个:
$(document).ready(function(){
$("select.form-control").change(function(){
$(".home").prop('disabled', $(this).val() == 'home-none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
<option value="home-none">-</option>
<option value="home-select">Team</option>
</select>
<div class="form-group">
<input class="form-control home" name="h-p1-fn" placeholder="First name" type="text"/>
</div>
<div class="form-group">
<input class="form-control home" name="h-p1-ln" placeholder="Last name" type="text"/>
</div>
关于javascript - 当选择选项时,JQuery 禁用输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39064365/