---
title: 'jQuery Disable and Enable Form Elements Using a Checkbox'
url: 'https://worldoweb.co.uk/2011/jquery-disable-and-enable-form-elements-using-a-checkbox'
markdown: 'https://worldoweb.co.uk/2011/jquery-disable-and-enable-form-elements-using-a-checkbox.md'
date: '2011-04-05'
description: 'A simple jQuery script to enable or disable form elements using a checkbox.'
taxonomy:
  category:
    - 'Web Development'
  tag:
    - Forms
    - Tutorial
    - HTML
    - jQuery
---

# jQuery Disable and Enable Form Elements Using a Checkbox

 Published on April 5, 2011 by Tracy Ridge in  [Web Development](https://worldoweb.co.uk/category/category:Web%20Development) 

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 is now deprecated, the source code is no longer maintained.**

## Demo

Checkout the demo on [JS Fiddle](https://jsfiddle.net/s4upn2wc/14/ "JS Fiddle Demo")

## HTML Code

```html
<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

```javascript
$(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

[jQuery-Enable-Disable-1.0.zip](https://worldoweb.co.uk/2011/jquery-disable-and-enable-form-elements-using-a-checkbox/jQuery-Enable-Disable-1.0.zip)

### Share

 [X](https://x.com/intent/tweet?text=jQuery%20Disable%20and%20Enable%20Form%20Elements%20Using%20a%20Checkbox&url=https%3A%2F%2Fworldoweb.co.uk%2F2011%2Fjquery-disable-and-enable-form-elements-using-a-checkbox&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fworldoweb.co.uk%2F2011%2Fjquery-disable-and-enable-form-elements-using-a-checkbox "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fworldoweb.co.uk%2F2011%2Fjquery-disable-and-enable-form-elements-using-a-checkbox&title=jQuery%20Disable%20and%20Enable%20Form%20Elements%20Using%20a%20Checkbox "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fworldoweb.co.uk%2F2011%2Fjquery-disable-and-enable-form-elements-using-a-checkbox "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=jQuery%20Disable%20and%20Enable%20Form%20Elements%20Using%20a%20Checkbox%20https%3A%2F%2Fworldoweb.co.uk%2F2011%2Fjquery-disable-and-enable-form-elements-using-a-checkbox "Share on Bluesky") [Email](mailto:?subject=jQuery%20Disable%20and%20Enable%20Form%20Elements%20Using%20a%20Checkbox&body=https%3A%2F%2Fworldoweb.co.uk%2F2011%2Fjquery-disable-and-enable-form-elements-using-a-checkbox "Share via email") 

#### Tags

 [ Forms](https://worldoweb.co.uk/tag/tag:Forms) [ Tutorial](https://worldoweb.co.uk/tag/tag:Tutorial) [ HTML](https://worldoweb.co.uk/tag/tag:HTML) [ jQuery](https://worldoweb.co.uk/tag/tag:jQuery) 

##### Next

 [ ← Top 10- jQuery Tutorials ](https://worldoweb.co.uk/2011/top-10-jquery-tutorials) 

OR

##### Previous

 [ PHP and jQuery checkbox array with a hint of Jquery UI → ](https://worldoweb.co.uk/2011/php-jquery-checkbox-array-with-a-hint-of-jquery-ui)

---

## Navigation

- Previous: [Top 10- jQuery Tutorials](https://worldoweb.co.uk/2011/top-10-jquery-tutorials.md)
- Next: [PHP and jQuery checkbox array with a hint of Jquery UI](https://worldoweb.co.uk/2011/php-jquery-checkbox-array-with-a-hint-of-jquery-ui.md)