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