CODEWITHSUNDEEP
jqueryforms
user159025
user159025

Reputation: 725

jQuery - Disable Form Fields

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.

Upvotes: 56

Views: 122028

Answers (5)

MetaSkills
MetaSkills

Reputation: 1854

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

Upvotes: 48

Matt Howell
Matt Howell

Reputation: 15966

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

Upvotes: 114

Rohit bal
Rohit bal

Reputation: 19

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

Upvotes: 0

Rigobert Song
Rigobert Song

Reputation: 2804

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

Upvotes: 12

Nrj
Nrj

Reputation: 6841

try this

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

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

vice versa for the select also.

Upvotes: 7

Related Questions