選擇選項時，jQuery禁用輸入

Question

我有2個選項： #home-none和#home-select ，當#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

您正誤入錯誤的事件。 請改用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> 

Answer 2

這樣會更好

1. 在選項上使用值而不是ID
2. 使用更改事件
3. 加載時執行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
});