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随机数。我会给我所有的复选框“class”类和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);
            }
        });
    }
});

jQuery复选框自动禁用并重新启用

4 个答案: