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 select 选项已启用。但是我的代码不起作用。有人可以帮帮我吗？

Answer 1

对于这样的事情使用 classes ，不需要 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 2

您最好使用类而不是带有随机数的 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 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 来分配事件。由于您开始使用 1 的 ID，我们需要在代码中对其进行补偿。然后由于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);
            }
        });
    }
});