Disable/enable element with checkbox and jQuery?

开发者 https://www.devze.com 2023-01-17 22:34 出处：网络

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.

相关专题：jquery

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.

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

crazy demo

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

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>

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

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

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

                }
            });