Web Development

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

Share
Published by
Tracy Ridge

Recent Posts

January 2025 – Hot New Web Dev

Welcome to Hot Web Dev January 2025, featuring the latest technology and web development news.… Read More

4 days ago

Hot New Web Dev – December 2024

Welcome to Hot Web Dev December 2024, featuring the latest technology and web development news.… Read More

1 month ago

Useful Must Have Software For Mac 2025

I have heard productivity is key. Sometimes, computers don't behave the way we expect or… Read More

1 month ago

Hot New Web Dev – November 2024

Welcome to Hot Web Dev November 2024, featuring the latest technology and web development news.… Read More

2 months ago

Hot New Web Dev – October 2024

Welcome to Hot Web Dev October 2024, featuring the latest technology and web development news.… Read More

3 months ago

New Svelte 5 Guessing Game 2024

In this tutorial, you’ll build a fun and interactive guessing game using Svelte 5, the… Read More

4 months ago