CODEWITHSUNDEEP
jquery
BasicBud
BasicBud

Reputation: 55

Can not re-enable select tag after disabling JQuery

I am using change() to enable or disable the select tag. I am able to disable the tag. But I can not seem to re-enable it.

$(function() {
  $('.menu-select').change(function() {
    if ($(this).val() == '2') {
      $('select').not(this).prop('disabled', true);
    } else {
      $('select').not(this).removeProp('disabled');

      $('select option').removeProp('disabled');

    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="rating" class="form-control custom-select menu-select" style="width: 100%; height:36px;">

  <option value="">Select a Rating for the Movie/Series...</option>
  <option value="1" data-id="G">G</option>
  <option value="2" data-id="PG3">PG3</option>
  <option value="3" data-id="PG-13">PG-13</option>
  <option value="4" data-id="R">R</option>
  <option value="5" data-id="NC-17">NC-17</option>
  <option value="6" data-id="TV-14">TV-14</option>

</select>

<br><br>

<select name="rating" class="form-control custom-select" style="width: 100%; height:36px;">

  <option value="">Select a Rating for the Movie/Series...</option>
  <option value="1" data-id="G">G</option>
  <option value="2" data-id="PG3">PG3</option>

</select>

Upvotes: 2

Views: 23

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371168

See the docs on .removeProp():

The .removeProp() method removes properties set by the .prop() method.

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

Removing a property from a DOM element doesn't reset its state to how it was previously - many DOM property methods are getter/setter methods, so if the property is just removed, nothing may happen. You can see this more clearly in vanilla JS:

const select = document.querySelector('select');
select.disabled = true;
delete select.disabled;
<select name="rating" class="form-control custom-select menu-select" style="width: 100%; height:36px;">

  <option value="">Select a Rating for the Movie/Series...</option>
  <option value="1" data-id="G">G</option>
  <option value="2" data-id="PG3">PG3</option>
  <option value="3" data-id="PG-13">PG-13</option>
  <option value="4" data-id="R">R</option>
  <option value="5" data-id="NC-17">NC-17</option>
  <option value="6" data-id="TV-14">TV-14</option>

</select>

So, the else block should just be:

$('select').not(this).prop('disabled', false);


$('.menu-select').change(function() {
  if ($(this).val() == '2') {
    $('select').not(this).prop('disabled', true);
  } else {
    $('select').not(this).prop('disabled', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="rating" class="form-control custom-select menu-select" style="width: 100%; height:36px;">

  <option value="">Select a Rating for the Movie/Series...</option>
  <option value="1" data-id="G">G</option>
  <option value="2" data-id="PG3">PG3</option>
  <option value="3" data-id="PG-13">PG-13</option>
  <option value="4" data-id="R">R</option>
  <option value="5" data-id="NC-17">NC-17</option>
  <option value="6" data-id="TV-14">TV-14</option>

</select>

<br><br>

<select name="rating" class="form-control custom-select" style="width: 100%; height:36px;">

  <option value="">Select a Rating for the Movie/Series...</option>
  <option value="1" data-id="G">G</option>
  <option value="2" data-id="PG3">PG3</option>

</select>

Upvotes: 1

Related Questions