javascript - 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。 我会给我所有的复选框赋予类“box”和 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 />