jQuery Disable and Enable Form Elements Using a Checkbox

By Tracy Ridge

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 in a 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

Please type something into the text input boxes and click on Enable
I can only get the demo to work in Chrome and Safari so it might not work in Firefox. If the demo doesn’t work checkout the JSFiddle demo

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

Image may be NSFW.
Clik here to view.

The post jQuery Disable and Enable Form Elements Using a Checkbox appeared first on WorldOWeb.