jQuery的複選框自動禁用和重新啓用

Question

我有我的HTML代碼和我的JavaScript代碼如下（我使用jQuery）

HTML：

<input type="checkbox" name="type" value="program" id="box-1" /> Desktop Programming 
<select name="lang-1" id="select-1" disabled> 
    <option value="c">C/C++</option> 
    <option value="vb">VB</option> 
    <option value="cs">C#</option> 
</select><br /><br /> 

<input type="checkbox" name="type" value="web" id="box-2" /> Web Development 
<select name="lang-2" id="select-2" disabled> 
    <option value="asp">ASP</option> 
    <option value="php">PHP</option> 
    <option value="ror">Ruby on Rails</option> 
</select><br /><br /> 

的JavaScript（jQuery的）：

$(document).ready(function(){ 
    var x; 
    $("#box-" + x).click(function(){ 
     var $this = $(this); 
     if ($this.is(":checked")) { 
      $("#select-" + x).prop('disabled', false); 
     } else { 
      $("#select-" + x).prop('disabled', true); 
     } 
    }); 
}); 

而我希望當我檢查編程複選框，編程選擇選項（複選框旁邊）啓用。以及當我檢查web dev複選框時，Web dev選項被啓用。但我的代碼不起作用。有誰能夠幫助我？

Answer 1

你最好用類來代替ID和隨機數。 我會給我所有的複選框的類「框」和id 1,2,3等等。我想$this不起作用。它必須是$(this)。

那麼你的代碼是這樣（工作示例）：

$(document).ready(function(){ 
 
    $('.box').click(function(){ 
 
     var x= $(this).attr("id"); 
 
     if ($(this).is(":checked")) { 
 
      $("#select-" + x).prop('disabled', false); 
 
     } else { 
 
      $("#select-" + x).prop('disabled', true); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="type" value="program" class="box" id="1" /> Desktop Programming 
 
<select name="lang-1" id="select-1" disabled> 
 
    <option value="c">C/C++</option> 
 
    <option value="vb">VB</option> 
 
    <option value="cs">C#</option> 
 
</select><br /><br /> 
 

 
<input type="checkbox" name="type" value="web" class="box" id="2" /> Web Development 
 
<select name="lang-2" id="select-2" disabled> 
 
    <option value="asp">ASP</option> 
 
    <option value="php">PHP</option> 
 
    <option value="ror">Ruby on Rails</option> 
 
</select><br /><br />

Answer 2

對於這樣的事情，使用類，不需要ID。

現在你的變量x是不確定的，沒有一個循環來解析的ID將無法正常工作

<input type="checkbox" class="box" /> Desktop Programming 
<select name="lang-1" class="select" disabled> 

JS

$('input:checkbox.box').change(function(){ 
    $(this).next('.select').prop('disabled', !this.checked); 
}); 

如果佈局是這樣的選擇是不正確的輸入後我們可以修改遍歷位

Answer 3

嗨，你可以做這樣的事情working demo

請有一個相同的類所有的複選框這裏我認爲是checkbox那麼你的HTML看起來就像這樣

<input type="checkbox" name="type" value="program" class="checkbox" id="box-1" /> Desktop Programming 
<select name="lang-1" id="select-1" disabled> 
    <option value="c">C/C++</option> 
    <option value="vb">VB</option> 
    <option value="cs">C#</option> 
</select><br /><br /> 

<input type="checkbox" name="type" value="web" class="checkbox" id="box-2" /> Web Development 
    <select name="lang-2" id="select-2" disabled> 
    <option value="asp">ASP</option> 
    <option value="php">PHP</option> 
    <option value="ror">Ruby on Rails</option> 
    </select><br /><br /> 

附加寫這個jQuery

$(document).ready(function(){ 

    $('.checkbox').on('change',function(){ 
     var checked_id = $(this).prop('id'); 
     var a = checked_id.slice(4); 

     $("#select-"+a).prop('disabled',!this.checked); 
    }); 
}); 

Answer 4

所以有很多的答案在這裏，其中大部分的更好的方法做你與小更清晰的代碼嘗試。但爲此，我添加了這個答案，以向您展示您編寫的代碼和一個工作示例出了什麼問題。

所以你聲明變量x，但從來沒有給它賦值。好像你想循環複選框並使用索引x來分配事件。由於您開始使用ID 1，因此我們需要在代碼中進行補償。然後由於x沒有直接參與我們活動的範圍，因此我們需要查找x的值，因爲事件運行時它將只有最後一個值x。

所有的HTML我都一樣，只改變了javascript。正如我所說有更好的方法來做到這一點，並有很多答案顯示它，但這是爲了告訴你你做錯了什麼。

小提琴：https://jsfiddle.net/quyn4y23/

$(document).ready(function() { 
    // Find all checkboxes and get the length of all found 
    var x, inputs = $('input[type="checkbox"]'), length = inputs.length; 
    // For each checkbox assign event 
    for (x = 1; x <= length; x++) { 
     $("#box-" + x).click(function() { 
      var $this = $(this); 
      // Find the number in the checkbox id 
      var x = $this.attr('id').replace("box-", ""); 
      // Use number to find correct select 
      if ($this.is(":checked")) { 
       $("#select-" + x).prop('disabled', false); 
      } else { 
       $("#select-" + x).prop('disabled', true); 
      } 
     }); 
    } 
});