當選擇選項時，JQuery禁用輸入

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

你對錯誤的事件很迷惑。改爲使用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

這將在選項

工作，而不是ID更好

1. 使用價值使用更改事件
2. 負載執行變更事件在重新加載時處理更改的選擇

行這樣的：

<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 
});