Disable all select option depend upon array

Question

i have an multi select box given below: Please First see that.

My code:

$("select option:contains( " + data + ")").attr("disabled","disabled");

only helps to disable select option only if data has only one value(not in array)

Here is the problem:

var data =  31/8/2018,30/9/2018


I want to disable select options having values == data ,

so maybe, we need a loop which check data[1] == first option then second then third etc if values matched, that value will be disabled.

then check data[2] == first option then second then third ...etc if values matched, that select option will be disabled.

Result:: Ex. First two option ll be disable Is that Possible

<select class="form-control" multiple="" name="month[]" id="month">
 <option value="31/8/2018">  1 @ 31/8/2018   </option>
 <option value="30/9/2018">  2 @ 30/9/2018   </option>
 <option value="31/10/2018"> 3 @ 31/10/2018  </option>
 <option value="30/11/2018"> 4 @ 30/11/2018  </option>
 <option value="31/12/2018"> 5 @ 31/12/2018  </option>
</select>

$("select option:contains( " + data + ")").attr("disabled","disabled");

Can you explain what the variable data looks like and where it's being set? — Cue
– Cue, Commented Jan 12, 2019 at 19:43
Actually looks like: var data = <?php echo json_encode($existing_month) ?>; Looks as: 31/8/2018,30/9/2018 in database — Anmol singh
– Anmol singh, Commented Jan 12, 2019 at 19:45

Cue · Accepted Answer · 2019-01-12 20:13:05Z

3

Assuming data is a valid JavaScript array you can iterate each value and disable the option that contains that value.

// <?php echo json_encode($existing_month);
var data = "31/8/2018,30/9/2018";

$.each(data.split(','), function(index, value) {
  $('select > option').filter(function () {
  	return $(this).val() == value
  }).prop('disabled', true)
})

option[disabled] {
  color: #ccc;
  cursor: not-allowed
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select class="form-control" multiple="" name="month[]" id="month">
   <option value="31/8/2018">  1 @ 31/8/2018   </option>
   <option value="30/9/2018">  2 @ 30/9/2018   </option>
   <option value="31/10/2018"> 3 @ 31/10/2018  </option>
   <option value="30/11/2018"> 4 @ 30/11/2018  </option>
   <option value="31/12/2018"> 5 @ 31/12/2018  </option>
</select>

EDIT: From your comment it appears your variable is a comma delimited string so we will need to split the string by using the comma as the delimiter which results in an array.

edited Jan 12, 2019 at 20:13

answered Jan 12, 2019 at 19:51

Cue

2,7591 gold badge14 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anmol singh Over a year ago

It Works Fine Thanks, but my database contain Like: 31/8/2018,30/9/2018 Not Like: '31/8/2018','30/9/2018' Can u do something Actually i am new to java script So...

Cue Over a year ago

In your php json_encode($existing_month) is $existing_month an array or string or...?

Anmol singh Over a year ago

An array, which are inserted by Selecting multi select box, then use implode(',', $_POST['month']); function.

Cue Over a year ago

So the raw value is actually a comma delimited string that looks like 31/8/2018,30/9/2018 when echo'd from PHP? That's fine. I'll update the code accordingly.

GenericUser · Accepted Answer · 2019-01-12 19:54:01Z

From the documentation, "contains" can only be text. One quick answer with JQuery is to just iterate over the array using the same logic.

const data = ["31/8/2018", "30/9/2018"]
data.forEach(entry => {
  $("select option:contains( " + entry + ")").attr("disabled", "disabled");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control" multiple="" name="month[]" id="month">
  <option value="31/8/2018"> 1 @ 31/8/2018 </option>
  <option value="30/9/2018"> 2 @ 30/9/2018 </option>
  <option value="31/10/2018"> 3 @ 31/10/2018 </option>
  <option value="30/11/2018"> 4 @ 30/11/2018 </option>
  <option value="31/12/2018"> 5 @ 31/12/2018 </option>
</select>

Collectives™ on Stack Overflow

Disable all select option depend upon array

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related