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

假设数据是有效的JavaScript数组，则可以迭代每个值并禁用包含该值的option。

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

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

Answer 2

在documentation中，“包含”只能是文本。使用JQuery的一个快速答案是使用相同的逻辑对数组进行迭代。

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>

禁用所有选择选项取决于数组

2 个答案: