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