javascript - 禁用所有依赖于阵列的选择选项

Question

我有一个多选框，如下所示: 请先看看。

我的代码:

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

仅当数据只有一个值(不在数组中)时才有助于禁用选择选项

问题是这样的:

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


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

所以也许我们需要一个循环来检查 data[1] == 第一个选项然后第二个然后第三个等等 如果值匹配，则该值将被禁用。

然后检查数据[2] ==第一个选项然后第二个然后第三个......等等 如果值匹配，则该选择选项将被禁用。

结果::例如。前两个选项将被禁用 这可能吗

<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");

Answer 1

假设 data 是一个有效的 JavaScript 数组，您可以迭代每个值并禁用包含该值的选项。

// <?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>

编辑:从您的评论中可以看出，您的变量是一个逗号分隔的字符串，因此我们需要使用逗号作为分隔符来分割字符串，从而生成一个数组。