CODEWITHSUNDEEP
javascriptjquery
Roni X
Roni X

Reputation: 69

Jquery firing only once on dependant select dropdowns

There are three dropdowns and two of them depend on first selection to appear. Once i select a value on the first dropdown which is called "category" the other two dropdowns become enabled however if i pick the empty value again on category the other two dropdown remain enabled.

<script>
        $(document).ready(function() {
            $("select").on("change", function() {
                if  ($("select[name='category']").val() == "") { 
                    $("select[name='subcategory']").attr("disabled");
                    $("select[name='name']").attr("disabled");
                } else {
                    $("select[name='subcategory']").removeAttr("disabled");
                    $("select[name='ename']").removeAttr("disabled");
                }
            });
        });
    </script>

Upvotes: 1

Views: 65

Answers (1)

Mamun
Mamun

Reputation: 68933

Attributes vs. Properties

As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

You can try using .prop():

.prop('disabled', 'disabled');

Demo: (As per the discussion in the comment)

$(document).ready(function() {
  $("select[name=category]").on("change", function() {
    if($(this).val() == "") { 
      $("select[name=subcategory]").prop('disabled', 'disabled');
      $("select[name=ename]").prop('disabled', 'disabled');    
    } else {
      $("select[name=subcategory]").removeAttr("disabled");
      if($("select[name=subcategory]").val() == "") { 
        $("select[name=ename]").prop('disabled', 'disabled');
      } else {
        $("select[name=ename]").removeAttr("disabled");
      }
    }
    
  }).trigger('change');
  $("select[name=subcategory]").on("change", function() {
    if($(this).val() == "") { 
      $("select[name=ename]").prop('disabled', 'disabled');
    } else {
      $("select[name=ename]").removeAttr("disabled");
    }
  }).trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="category">
  <option value="">Select</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<select name="subcategory">
  <option value="">Select</option>
  <option value="a">A</option>
  <option value="b">B</option>
</select>
<select name="ename">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Upvotes: 2

Related Questions