CODEWITHSUNDEEP
jquery
ivva
ivva

Reputation: 2949

How to enable a dropdown is another dropdown is checked

I searched for decision of my question. I found some things but when I tried it, it didn't work. I need when user is selected from first dropdown, next dropdown to be enabled. Else, if he hasn't selected from first dropdown, next dropdown to be disabled. Here's what I tried:

  $(document).ready(function() {
          $('#region').click(function() {
            if ($('#region').attr('checked')) {
          
              $( "#school" ).selectmenu( "enable" );
            } else {
              
              $( "#school" ).selectmenu( "disable" ); 
            }
       });
      });
<select name='region'   id='region'>
  <option value="<?php echo set_select('gender'); ?>">Choose region</option>
     <option value="Region 1" >Region 1</option>
  <option value="Region 2" >Region 2</option> 
  </select>

<select name='school'   id='school'>
  <option value="<?php echo set_select('gender'); ?>">Choose school</option>
     <option value="School 1" >School 1</option>
  <option value="School 2" >School 2</option> 
  </select>

Now it's not disabled when user hasn't selected from first dropdown - region. Please how to do that? :)

Upvotes: 1

Views: 91

Answers (1)

keewnn
keewnn

Reputation: 600

Try something like this:

$(function() { // Shorthand for $(document).ready(
    $('#region').change(function() {
        if($("#region").val() == "")
            $("#school").prop("disabled", true);
        else
            $("#school").prop("disabled", false);
    });
});

Take note that you should change the value of the "Choose region" option to "" or change "" on line 3 to whatever its default value is.

Upvotes: 1

Related Questions