【问题标题】：Disable/enable element with checkbox and jQuery?使用复选框和 jQuery 禁用/启用元素？
【发布时间】：2014-10-16 15:31:39
【问题描述】：

我有一个复选框，如果我勾选它，我希望启用一个文本字段（默认禁用），当我取消选中该复选框时，我希望它再次被禁用。

我在这里看到了 jQuery Checkboxes 我如何切换 CSS 类，在这里 http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_disable.2Fenable_a_form_element.3F 我看到了如何使用两个按钮在启用和禁用之间切换。但是如何通过勾选/取消勾选复选框来切换文本字段的禁用/启用状态？

提前致谢。

【问题讨论】：

标签： jquery

【解决方案1】：

$(':checkbox').click(function(){
   $('input:text').attr('disabled',!this.checked)
});

crazy demo

【讨论】：

我认为您需要更改处理程序，即使用户单击与复选框关联的标签也会触发。
@Rao - 如果您担心的是标签，请查看crazy demo 2
谢谢您，有没有一种简单的方法可以删除禁用的文本框中的文本并取消选中禁用的复选框？

【解决方案2】：

您可以在复选框上附加更改处理程序，并使用其checked 属性启用/禁用文本字段。

$('#theCheckbox').change(function() {
    $('#theTextfield').attr('disabled', this.checked);
});

示例：http://jsbin.com/oludu3/2

【讨论】：

【解决方案3】：

这是一个可以满足您的需求的页面 - 它非常简单，但显示了您的需求

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#testcheckbox").change(function () { 
                    $("#testtextfield").attr("disabled", $(this).attr("checked"));
                });
            });
        </script>
    </head>
    <body>
        <input type="checkbox" id="testcheckbox" />
        <input type="text" id="testtextfield" />
    </body>
</html>

【讨论】：

【解决方案4】：

@Martin - 删除文本框中禁用的文本并取消选中禁用的复选框 - 只需添加此行

 $("#TextField_ID_name").val("");

要取消选中该复选框，您需要为该复选框分配 ID 名称然后将此行添加到 Jquery

$("#chekcbox_ID_name").attr('checked',false)

希望这对某人有所帮助......虽然我在 Martins 发帖 2 年后回复了他的问题 :-)

【讨论】：

【解决方案5】：

从 jQuery 1.6 开始，应该使用 .prop() 方法来设置禁用和检查，而不是 .attr() 方法：

$('#theCheckbox').change(function() {
    $('#theTextfield').prop('disabled', this.checked);
});

【讨论】：

【解决方案6】：

当asp:CheckBoxList控件的渲染表(#CheckBoxListList)中的最后一个复选框被选中时，显示和隐藏一个文本框(#otherSection2)用于输入其他选项

 $("#CheckBoxListList input[type='checkbox']:last").on("click", function () {

                if ($(this).is(":checked")) {
                    $("#otherSection2").show();
                } else {
                    $("#otherSection2").hide().find("input").val(null);

                }
            });

【讨论】：