Disable/enable element with checkbox and jQuery?

Question

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.

I saw here jQuery Checkboxes how I caan toggle a CSS class and here http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_disable.2Fenable_a_form_element.3F how I can switch between enabled and disabled with two buttons. But how do I toggle a textfields disabled/enabled status by tick/untick a checkbox?

Thanks in advance.

score 35 · Accepted Answer · answered Sep 27 '10 at 07:59

35

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

crazy demo

answered Sep 27 '10 at 07:59

Reigel Gallarde

64,198
21
121
139

1

I think you want the change handler, which will fire even if the user clicks a label associated with the checkbox. – Abhijit Rao Sep 27 '10 at 08:03
@Rao - if the it's label you're worrying, check [crazy demo 2](http://jsfiddle.net/FArMm/2/) – Reigel Gallarde Sep 27 '10 at 08:16
Thank you for that, is there just an easy way to delete the text in the textboxes that becomes disabled and untick the checkboxes that becomes disabled? – Martin Sep 27 '10 at 13:23

score 5 · Answer 2 · edited Jun 21 '11 at 13:17

5

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

edited Jun 21 '11 at 13:17

BrunoLM

97,872
84
296
452

answered Sep 27 '10 at 07:59

kennytm

510,854
105
1,084
1,005

score 1 · Answer 3 · edited Jun 27 '12 at 10:32

@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 :-)

score 1 · Answer 4 · answered Sep 27 '10 at 08: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>

score 0 · Answer 5 · answered Dec 23 '13 at 11:30

0

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);
});

answered Dec 23 '13 at 11:30

domenu

455
8
12

Iman · Answer 6 · 2014-10-16T07:31:39.727

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

                }
            });

Disable/enable element with checkbox and jQuery?

6 Answers6

crazy demo

Linked