56

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.

user159025
  • 725
  • 1
  • 7
  • 7

5 Answers5

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>
Matt Howell
  • 15,750
  • 7
  • 49
  • 56
  • 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: – user159025 Sep 07 '09 at 02:50
  • 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. – Matt Howell Sep 07 '09 at 02:55
  • Thanks for you efforts. Unfortunately, it is not working for me. Cheers. – user159025 Sep 07 '09 at 03:01
  • Maybe you could post more of your code. It's awfully hard to diagnose what's wrong without seeing the code. – Matt Howell Sep 07 '09 at 03:06
  • 1
    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: Cheers. – user159025 Sep 07 '09 at 03:22
  • This may not work, if only because the disabled attribute works by its presence. Setting it to true or false will still have the same effect, which is to disable the element. Better to use removeAttr when you want to enable the element in question. – David Andres Sep 07 '09 at 03:25
  • @dandres109: Ah, yes, true. Typed it in a hurry. – Matt Howell Sep 07 '09 at 03:39
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);
Lukas Knuth
  • 25,449
  • 15
  • 83
  • 111
MetaSkills
  • 1,954
  • 18
  • 15
12
$('input, select').attr('disabled', 'disabled');
Rigobert Song
  • 2,766
  • 2
  • 30
  • 47
7

try this

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

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

vice versa for the select also.

Nrj
  • 6,723
  • 7
  • 46
  • 58
  • can u add details as to what happened ? I tried it in IE was working fine. – Nrj Sep 07 '09 at 08:43
  • 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. – user159025 Sep 08 '09 at 06:31
0

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

Rohit bal
  • 19
  • 1