can we disable enable controls of specific div on checkbox

Question

Hi,
How we can disable enable controls of specific div on checkbox click/change,

I have three checkboxes and three divs, what I want to do is, on checkbox one checked enable div one controls (textboxes, select). so far I'm able to get the checkbox enable disable event like the code below

$('#chkbxOne').change(function () {
var c = this.checked ? 'T' : 'F';
if (c == "T") {
alert("Enable");
}
if (c == "F") {
alert("Disable");
}
});

where it alerts Enable, i want to enable all controls of this div,
same for other two divs

Amit Mohanty · Answer

Hey try this $( function () { $( "#chkMyCheckbox" ).click( function () { if ($( this ).is( ":checked" )) { $( '#select_div :input' ).removeAttr( 'disabled' ); $( '#select_div :select' ).removeAttr( 'disabled' ); $( '#select_div :submit' ).removeAttr( 'disabled' ); } else { //To disable all input elements within div use the following code: $( '#select_div :input' ).attr( 'disabled' , 'disabled' ); //To disable all select elements within div use the following code: $( '#select_div :select' ).attr( 'disabled' , 'disabled' ); //To disable all submit buttons within div use the following code: $( '#select_div :submit' ).attr( 'disabled' , 'disabled' ); } }); }); Full code: "C#" AutoEventWireup= "true" CodeBehind= "EnableDisableDiv.aspx.cs" Inherits= "WebApp1.EnableDisableDiv" %> "http://www.w3.org/1999/xhtml" > "server" > "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > $(function () { $( "#chkMyCheckbox" ).click(function () { if ($( this ). is ( ":checked" )) { $( '#select_div :input' ).removeAttr( 'disabled' ); $( '#select_div :select' ).removeAttr( 'disabled' ); $( '#select_div :submit' ).removeAttr( 'disabled' ); } else { //To disable all input elements within div use the following code: $( '#select_div :input' ).attr( 'disabled' , 'disabled' ); //To disable all select elements within div use the following code: $( '#select_div :select' ).attr( 'disabled' , 'disabled' ); //To disable all submit buttons within div use the following code: $( '#select_div :submit' ).attr( 'disabled' , 'disabled' ); } }); }); "form1" runat= "server" > "show_hide_checkbox_label" >Text Input? "checkbox" id= "chkMyCheckbox" /> "select_div" > "emp_id_input_label" >Employee ID: "text" name= "emp_id" id= "employee_id_input" /> "emp_id_add_label" >Employee ID: "emp_id" id= "employee_id" > --Select-- INCB001 INCB002 INCB003

Jignesh Kumar · Answer

Hi Rameez, Please find below link which will help you. http://www.iminfo.in/post/how-to-disable-all-controls-of-particular-div-jquery $( '#chkbxOne' ).change(function () { var c = this . checked ? 'T' : 'F' ; if (c == "T" ) { $("#divName input,select,textarea,button").prop("disabled", false); } if (c == "F" ) { $("#divName input,select,textarea,button").prop("disabled", true); } });

Rameez Javed · Answer

Jignesh Kumar Thanks, I have done something like $( '#chkbxOne' ).change( function () { var c = this .checked ? 'T' : 'F' ; if (c == "T" ) { $( "#divOne" ).removeClass( "DisableOne" ); //alert("Enable"); } if (c == "F" ) { $( "#divOne" ).addClass( "DisableOne" ); //alert("Disable"); } }); .disablePrimary { pointer-events: none; opacity: 0.4; } anyhow, thanks everyone.

Rajanikant Hawaldar · Answer

https://codepen.io/tipsoftheday/pen/JreAp https://www.tutorialrepublic.com/faq/how-to-disable-or-enable-a-form-element-using-jquery.php