Skip to main content Jump to list of all articles

jQuery Disable and Enable Form Elements Using a Checkbox

Here is a simple little snippet that uses jQuery to enable or disable text input boxes in forms using a checkbox. When disabling the text boxes it prompts you to confirm it so that you don’t accidentally delete your data. This might be useful for forms elements that need to be enabled or disabled when a certain checkbox is checked like on an options page. The code itself is quite self-explanatory but please feel free to ask if you are having any problems.  This script has now been included in wow playground with new and updated features.

Demo

Checkout the demo on JS Fiddle

HTML Code

<form method="post"><label title="Enable" for="enable">Enable</label><input id="enable" checked="checked" name="enable" type="checkbox" />
<label title="First Name" for="first_name">First Name</label><input id="first_name" class="textbox" name="first_name" type="text" />
<label title="Last Name" for="last_name">Last Name</label><input id="last_name" class="textbox" name="last_name" type="text" />
<label title="Age" for="age">Age</label><input id="age" class="textbox" name="age" type="text" />
<label title="Country" for="country">Country</label><input id="country" class="textbox" name="country" type="text" /></form>

Javascript/jQuery Code

$(document).ready(function($) {
      $("input[name='enable']").click(function(){
               if ($(this).is(':checked')) {               		
                    $('input.textbox:text').attr("disabled", false);               
                 }               
               else if ($(this).not(':checked')) {   	                 	
                    var ok = confirm('Are you sure you want to remove all data?');                        
                     if(ok) {   
                            var remove = '';                             	
                            $('input.textbox:text').attr ('value', remove);
                            $('input.textbox:text').attr("disabled", true);                            
                             }}           
 }); });

Download


Discover more from WorldOWeb

Subscribe to get the latest posts sent to your email.

7 replies on “jQuery Disable and Enable Form Elements Using a Checkbox”

Mightysooz
Mightysooz On

This works great. I was trying to do the reverse, where checking off 1 box, disable the rest of the checkboxes. Here’s my code to share –

$(“input[[Option1]’]”).click(function(){

if ($(this).is(‘:checked’)) {

$(“input[[Option2]’]”).attr(“disabled”, true);

$(“input[[Option3]’]”).attr(“disabled”, true);

$(“input[[Option4]’]”).attr(“disabled”, true);

$(“input[[Option5]’]”).attr(“disabled”, true);

$(“input[[Option6]’]”).attr(“disabled”, true);

}

else if ($(this).not(‘:checked’)) {

$(“input[[Option2]’]”).attr(“disabled”, false);

$(“input[[Option3]’]”).attr(“disabled”, false);

$(“input[[Option4]’]”).attr(“disabled”, false);

$(“input[[Option5]’]”).attr(“disabled”, false);

$(“input[[Option6]’]”).attr(“disabled”, false);

}

});

Doug Estep
Doug Estep On

I created a widget that can completely disable or present a read-only view of the content on your page. It disables all buttons, anchors, removes all click events, etc., and can re-enable them all back again. It even supports all jQuery UI widgets as well. I created it for an application I wrote at work. You’re free to use it.

Comments are closed.