Question

我有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>

控制台不显示错误，但不起作用。

Answer 1

你正在接触错误的事件。请改用change的{{1}}事件。在那里，您可以阅读select元素的value属性，将相关的option元素设置为已禁用。试试这个：

＆＃13;

input

＆＃13;

$(document).ready(function(){
  $("select.form-control").change(function(){
    $(".home").prop('disabled', $(this).val() == 'home-none');
  });
});

＆＃13;

Answer 2

这会更好用

在选项
使用更改事件
在加载时执行change事件以在重新加载时处理更改的选择

排成一行：

<select class="form-control">
  <option value="home-none">-</option>
  <option value="home-select">Team</option>
</select>

$(function() {
  $("select.form-control").on("change",function() {
    $(".home").prop('disabled',this.value=="home-none");
  }).change(); // execute on load
});

选择选项时，JQuery禁用输入

2 个答案: