使用特定值禁用頁面上的所有選擇選項 - Javascript

Question

我試圖禁用頁面上具有特定值的所有選擇框中的所有選項。

如果有5個選擇框，每個有4個選項。就像這樣：

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

我想禁用與整個頁面上的價值3所有選項中，我如何實現這一目標？

$("select option["+previous+"]").attr('disabled', 'disabled'); 

但這禁用Select option與選定值。

任何幫助將不勝感激。

Answer 1

看起來像你傳遞的任何東西都被視爲內部選擇的索引。嘗試值屬性選擇器

$("select option[value ="+previous+"]").attr('disabled', 'disabled'); 

Answer 2

你可以使用jquery中的value屬性來實現它。

$("select option[value='3']").attr('disabled', 'disabled'); 

Answer 3

在這裏，你有一個解決方案去使用ES6模板文字

var previous = 3; 
 
$(`select option[value=${previous}]`).prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 
<select> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 
<select> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select>

希望這會幫助你。