Disable/enable element with checkbox and jQuery?

前端未结

关注

 6  1164

I have a checkbox and if I tick it I want a textfield to become enabled (disabled as default) and when I untick the the checkbox I want it to become disabled again.

相关标签:

6条回答

误落风尘

2020-12-29 11:51

show and hide a textbox(#otherSection2) for entering other options when last checkbox in a rendered table(#CheckBoxListList) of asp:CheckBoxList control is selected

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

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

                }
            });

0 讨论(0)

故里飘歌

2020-12-29 11:55

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

crazy demo

0 讨论(0)

不要未来只要你来

2020-12-29 11:57
You can attach the change handler on the checkbox, and enable/disable the text field with its checked property.
```
$('#theCheckbox').change(function() {
    $('#theTextfield').attr('disabled', this.checked);
});
```
Example: http://jsbin.com/oludu3/2
0 讨论(0)
发布评论:

提交评论
- 加载中...
我寻月下人不归

2020-12-29 12:01
Since jQuery 1.6, the .prop() method should be used to set disabled and checked instead of the .attr() method:
```
$('#theCheckbox').change(function() {
    $('#theTextfield').prop('disabled', this.checked);
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
误落风尘

2020-12-29 12:10
@Martin -to delete the text in the textboxes that becomes disabled and untick the checkboxes that becomes disabled - just add this line
```
 $("#TextField_ID_name").val("");
```
and to uncheck the checkbox, you need to assign ID name to the checkbox and then add this line to the Jquery
```
$("#chekcbox_ID_name").attr('checked',false)
```
Hope this helps someone ... though I'm replying to Martins question after 2 years since his posting :-)
0 讨论(0)
发布评论:

提交评论
- 加载中...

小鲜肉

2020-12-29 12:11

Here's a page that does what you're looking for - it's pretty minimal but shows what you need

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

0 讨论(0)