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复选框时，web选择选项也是启用的。但我的代码不起作用。有人能帮我吗？

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

嗨，你可以做一些像工作演示这样的事情

请在这里的所有复选框中有一个相同的类，我把它作为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);
   });
 });