CODEWITHSUNDEEP
javascriptjquery
Karthik
Karthik

Reputation: 5757

Select box Options disable / Enable not working in jQuery

I have two select boxes with some dependency conditions. when I select greater than level 8 need to enable all options. but it's not working

function enableolympiads(gradeid) {

  var gradeval = $("#levels" + gradeid + " option:selected").val();

  if (gradeval > 0 && (gradeval == 8 || gradeval == 9 || gradeval == 10)) {
    alert(gradeval);
    jQuery("#olympiads" + gradeid + " option:contains('3')").removeAttr('disabled');
    jQuery("#olympiads" + gradeid + " option:contains('4')").removeAttr('disabled');
  } else {
    jQuery("#olympiads" + gradeid + " option:contains('3')").attr('disabled');
    jQuery("#olympiads" + gradeid + " option:contains('4')").attr('disabled');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="levels[]" id="levels1" onchange="enableolympiads(1)" required>
  <option value="">Select</option>
  <option value="1">level 1</option>
  <option value="2">level 2</option>
  <option value="3">level 3</option>
  <option value="4">level 4</option>
  <option value="5">level 5</option>
  <option value="6">level 6</option>
  <option value="7">level 7</option>
  <option value="8">level 8</option>
  <option value="9">level 9</option>
  <option value="10">level 10</option>
</select>

<select class="form-control" name="olympiads[0][]" id="olympiads1" multiple required>
  <option value="1"> English </option>
  <option value="2"> Maths </option>
  <option value="3" disabled> Science </option>
  <option value="4" disabled> AI </option>
</select>

Upvotes: 0

Views: 41

Answers (2)

Pranav Rustagi
Pranav Rustagi

Reputation: 2721

Write less, achieve more :)

function enableolympiads(gradeid) {
  var gradeval = $("#levels" + gradeid).val();
  if (gradeval >= 8) {
    $("#olympiads" + gradeid + " option").filter("[value = 3], [value = 4]").removeAttr('disabled');
  } else {
    $("#olympiads" + gradeid + " option").filter("[value = 3], [value = 4]").attr('disabled', true);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="levels[]" id="levels1" onchange="enableolympiads(1)" required>
  <option value="">Select</option>
  <option value="1">level 1</option>
  <option value="2">level 2</option>
  <option value="3">level 3</option>
  <option value="4">level 4</option>
  <option value="5">level 5</option>
  <option value="6">level 6</option>
  <option value="7">level 7</option>
  <option value="8">level 8</option>
  <option value="9">level 9</option>
  <option value="10">level 10</option>
</select>

<select class="form-control" name="olympiads[0][]" id="olympiads1" multiple required>
  <option value="1"> English </option>
  <option value="2"> Maths </option>
  <option value="3" disabled> Science </option>
  <option value="4" disabled> AI </option>
</select>

Upvotes: 1

fdomn-m
fdomn-m

Reputation: 28621

This selector:

option:contains('3')

looks at the text of the option, not the value.

Change to

option[value=3]


function enableolympiads(gradeid) {

  var gradeval = $("#levels" + gradeid + " option:selected").val();

  if (gradeval > 0 && (gradeval == 8 || gradeval == 9 || gradeval == 10)) {
    console.log(gradeval);
    jQuery("#olympiads" + gradeid + " option[value=3]").removeAttr('disabled');
    jQuery("#olympiads" + gradeid + " option[value=4]").removeAttr('disabled');
  } else {
    jQuery("#olympiads" + gradeid + " option[value=3]").attr('disabled', 'disabled');
    jQuery("#olympiads" + gradeid + " option[value=4]").attr('disabled', 'disabled');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="levels[]" id="levels1" onchange="enableolympiads(1)" required>
  <option value="">Select</option>
  <option value="1">level 1</option>
  <option value="2">level 2</option>
  <option value="3">level 3</option>
  <option value="4">level 4</option>
  <option value="5">level 5</option>
  <option value="6">level 6</option>
  <option value="7">level 7</option>
  <option value="8">level 8</option>
  <option value="9">level 9</option>
  <option value="10">level 10</option>
</select>

<select class="form-control" name="olympiads[0][]" id="olympiads1" multiple required>
  <option value="1"> English </option>
  <option value="2"> Maths </option>
  <option value="3" disabled> Science </option>
  <option value="4" disabled> AI </option>
</select>

Upvotes: 1

Related Questions