jQuery - Disable Form Fields

Question

I have 2 fields: 1 input, 1 select box.

Is it possible to make the browser disable one of the fields when the user uses the other?

For example, if the user is entering data into the input, the select box is disabled. If the user is selecting data from the select (dropdown), the input is disabled.

Any help with this would be much appreciated.

Cheers in advance.

Matt Howell · Accepted Answer · 2011-11-25 19:50:16Z

114

<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript">
  $(document).ready(function() {
      $("#suburb").blur(function() {
          if ($(this).val() != '')
              $("#post_code").attr("disabled", "disabled");
          else
              $("#post_code").removeAttr("disabled");
      });

      $("#post_code").blur(function() {
          if ($(this).val() != '')
              $("#suburb").attr("disabled", "disabled");
          else
              $("#suburb").removeAttr("disabled");
      });
  });
</script>

You'll also need to add a value attribute to the first option under your select element:

<option value=""></option>

edited Nov 25, 2011 at 19:50

answered Sep 7, 2009 at 2:35

Matt Howell

16k7 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user159025 Over a year ago

Hey bigmattyh, Thanks for you quick reply. Unfortunately, the script isn't working for me. Is there something I need to be doing in order for the script to work? Below is my code: <input class="textfield" type="text" name="post_code" id="post_code" maxlength="4" /> <select size="6" name="suburb" id="suburb" /> <option selected="selected"></option> </select>

Matt Howell Over a year ago

Well, you'll need to include jQuery, and put this code into a $(document).ready() block (updated to relfect this). As for your HTML, you will need a default value on that select box, to make this work reliably.

user159025 Over a year ago

Thanks for you efforts. Unfortunately, it is not working for me. Cheers.

Matt Howell Over a year ago

Maybe you could post more of your code. It's awfully hard to diagnose what's wrong without seeing the code.

user159025 Over a year ago

Again thank you. Perhaps I didn't accurately describe what I am trying to achieve. As you know there are 2 fields: input, select. when one is entering data into the input, the select field should be disabled. The same for when selecting from the select field. The issue is, one has to 'click off' the fields for the other to become 'abled' again. Below is my code: <input class="textfield" type="text" name="post_code" id="post_code" maxlength="4" /> <select size="6" name="suburb" id="suburb"> <option selected="selected" value=""></option> </select> Cheers.

|

Lukas Knuth · Accepted Answer · 2013-10-14 21:14:57Z

48

The jQuery docs say to use prop() for things like disabled, checked, etc. Also the more concise way is to use their selectors engine. So to disable all form elements in a div or form parent.

$myForm.find(':input:not(:disabled)').prop('disabled',true);

And to enable again you could do

$myForm.find(':input:disabled').prop('disabled',false);

edited Oct 14, 2013 at 21:14

Lukas Knuth

25.8k16 gold badges88 silver badges114 bronze badges

answered Jul 12, 2011 at 20:08

MetaSkills

1,85418 silver badges15 bronze badges

2 Comments

dwenaus Over a year ago

this is cleaner and easier to include in any logical constructs

Cazuma Nii Cavalcanti Over a year ago

With jQuery 1.6+ this is the recommended approach.

Rigobert Song · Accepted Answer · 2009-11-04 10:19:33Z

12

$('input, select').attr('disabled', 'disabled');

answered Nov 4, 2009 at 10:19

Rigobert Song

2,8122 gold badges31 silver badges49 bronze badges

1 Comment

pécé Over a year ago

+1 and i add the following line for style : $('input, textarea').attr('readonly', 'readonly');

Nrj · Accepted Answer · 2009-09-07 05:29:04Z

7

try this

$("#inp").focus(function(){$("#sel").attr('disabled','true');});

$("#inp").blur(function(){$("#sel").removeAttr('disabled');});

vice versa for the select also.

answered Sep 7, 2009 at 5:29

Nrj

6,8817 gold badges49 silver badges59 bronze badges

2 Comments

Nrj Over a year ago

can u add details as to what happened ? I tried it in IE was working fine.

user159025 Over a year ago

Hey Nrj. Thanks for replying. I added the script. But nothing happens. I've added $(document).ready(function() and tried different ID names, but nothing happened. Cheers.

Rohit bal · Accepted Answer · 2011-01-30 23:50:10Z

0

Here's a jquery plugin to do the same: http://s.technabled.com/jquery-foggle

answered Jan 30, 2011 at 23:50

Rohit bal

191 bronze badge

1 Comment

ftrotter Over a year ago

costs between $3 or $15 and is not Open Source, but it does solve the problem.

Collectives™ on Stack Overflow

jQuery - Disable Form Fields

5 Answers 5

7 Comments

2 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

2 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related