crazy demo

Question

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

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

提前致谢。

Answer 1

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

crazy demo

Answer 2

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

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

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

Answer 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>

Answer 4

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

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

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

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

希望这对某人有所帮助......虽然自从他发布以来我已经回复了马丁斯的问题： - ）

Answer 5

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

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

Answer 6

显示并隐藏文本框（#otherSection2），以便在选中asp：CheckBoxList控件的渲染表（#CheckBoxListList）中的最后一个复选框时输入其他选项

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

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

                }
            });

使用复选框和jQuery禁用/启用元素？

6 个答案:

crazy demo