选择选项时，jQuery禁用输入

debugcn 发表于 Dev

卢卡斯·巴里乌纳斯（LukasBaliūnas）

我有两个选择：#home-none和#home-select，当＃家庭没有选择，我想我所有的带班输入.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>

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

罗里·麦克罗森（Rory McCrossan）

您正误入错误的事件。使用change事件的select代替。从那里您可以读取元素的value属性，option以将相关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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。