使用特定值禁用页面上的所有选择选项 - 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>

希望这会帮助你。