如何根据JavaScript中的值禁用中的？

时间：2022-08-24 10:25:38

I have a <select> with a number of <option>s. Each has a unique value. I need to disable an <option> with a given defined value (not innerhtml).

我有一个

Anyone have an idea how?

有人知道怎么样？

5 个解决方案

#1

62  

Pure Javascript

With pure Javascript, you'd have to cycle through each option, and check the value of it individually.

使用纯Javascript，您必须遍历每个选项，并单独检查它的值。

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  (op[i].value.toLowerCase() == "*") 
    ? op[i].disabled = true 
    : op[i].disabled = false ;
}

Without enabling non-targeted elements:

没有启用非目标元素：

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  if (op[i].value.toLowerCase() == "*") {
    op[i].disabled = true;
  }
}

jQuery

With jQuery you can do this with a single line:

使用jQuery，您可以使用一行执行此操作：

$("option[value='*']")
  .attr("disabled", "disabled")
  .siblings().removeAttr("disabled");

Without enabling non-targeted elements:

没有启用非目标元素：

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

​ Note that this is not case insensitive. "*" will not equal "*". To get a case-insensitive match, you'd have to cycle through each, converting the value to a lower case, and then check against that:

请注意，这不是不区分大小写的。 “*”不等于“*”。要获得不区分大小写的匹配，您必须遍历每个，将值转换为小写，然后检查：

$("option").each(function(){
  if ($(this).val().toLowerCase() == "*") {
    $(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
  }
});

Without enabling non-targeted elements:

没有启用非目标元素：

$("option").each(function(){
  if ($(this).val().toLowerCase() == "*") {
    $(this).attr("disabled", "disabled");
  }
});

#2

3  

Set an id to the option then use get element by id and disable it when x value has been selected..

将id设置为选项，然后使用get element by id并在选择x值时禁用它。

example

例

<body>
      <select class="pull-right text-muted small" 
                 name="driveCapacity" id=driveCapacity onchange="checkRPM()">
      <option value="4000.0" id="4000">4TB</option>
      <option value="900.0" id="900">900GB</option>
      <option value="300.0" id ="300">300GB</option>
    </select>
    </body>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200"){         
        document.getElementById("driveCapacity").value = "4000.0";
        document.getElementById("4000").disabled = false;           
    }else{          
        document.getElementById("4000").disabled = true;            
    }    
</script>

#3

1  

var vals = new Array( 2, 3, 5, 8 );
select_disable_options('add_reklamaciq_reason',vals);
select_disable_options('add_reklamaciq_reason');

function select_disable_options(selectid,vals){
  var selected = false ;
  $('#'+selectid+' option').removeAttr('selected');
  $('#'+selectid+' option').each(function(i,elem){
       var elid = parseInt($(elem).attr('value'));
       if(vals){
           if(vals.indexOf(elid) != -1){
               $(elem).removeAttr('disabled');
               if(selected == false){
                   $(elem).attr('selected','selected');
                   selected = true ; 
               }
           }else{
               $(elem).attr('disabled','disabled'); 
           }
       }else{
            $(elem).removeAttr('disabled');
       }
  });   
}

Here with JQ .. if anybody search it

这里有JQ ..如果有人搜索它

#4

0  

I would like to give you also the idea to disable an <option> with a given defined value (not innerhtml). I recommend to it with jQuery to get the simplest way. See my sample below.

我想给你一个禁用带有给定定义值（不是innerhtml）的

HTML

HTML

Status:  
<div id="option">
   <select class="status">
      <option value="hand" selected>Hand</option>
      <option value="simple">Typed</option>
      <option value="printed">Printed</option>
   </select>
</div>

Javascript

使用Javascript

The idea here is how to disable Printed option when current Status is Hand

这里的想法是当当前状态为Hand时如何禁用Printed选项

var status = $('#option').find('.status');//to get current the selected value
var op = status.find('option');//to get the elements for disable attribute
(status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false;

You may see how it works here:

您可以在这里看到它是如何工作的：

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

#5

-2  

You can also use this function,

你也可以使用这个功能，

function optionDisable(selectId, optionIndices)
{
    for (var idxCount=0; idxCount<optionIndices.length;idxCount++)
    {
        document.getElementById(selectId).children[optionIndices[idxCount]].disabled="disabled";
        document.getElementById(selectId).children[optionIndices[idxCount]].style.backgroundColor = '#ccc';
        document.getElementById(selectId).children[optionIndices[idxCount]].style.color = '#f00';
    }
}

#1

62  

Pure Javascript

With pure Javascript, you'd have to cycle through each option, and check the value of it individually.

使用纯Javascript，您必须遍历每个选项，并单独检查它的值。

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  (op[i].value.toLowerCase() == "*") 
    ? op[i].disabled = true 
    : op[i].disabled = false ;
}

Without enabling non-targeted elements:

没有启用非目标元素：

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  if (op[i].value.toLowerCase() == "*") {
    op[i].disabled = true;
  }
}

jQuery

With jQuery you can do this with a single line:

使用jQuery，您可以使用一行执行此操作：

$("option[value='*']")
  .attr("disabled", "disabled")
  .siblings().removeAttr("disabled");

Without enabling non-targeted elements:

没有启用非目标元素：

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

​ Note that this is not case insensitive. "*" will not equal "*". To get a case-insensitive match, you'd have to cycle through each, converting the value to a lower case, and then check against that:

请注意，这不是不区分大小写的。 “*”不等于“*”。要获得不区分大小写的匹配，您必须遍历每个，将值转换为小写，然后检查：

$("option").each(function(){
  if ($(this).val().toLowerCase() == "*") {
    $(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
  }
});

Without enabling non-targeted elements:

没有启用非目标元素：

$("option").each(function(){
  if ($(this).val().toLowerCase() == "*") {
    $(this).attr("disabled", "disabled");
  }
});

#2

3  

Set an id to the option then use get element by id and disable it when x value has been selected..

将id设置为选项，然后使用get element by id并在选择x值时禁用它。

example

例

<body>
      <select class="pull-right text-muted small" 
                 name="driveCapacity" id=driveCapacity onchange="checkRPM()">
      <option value="4000.0" id="4000">4TB</option>
      <option value="900.0" id="900">900GB</option>
      <option value="300.0" id ="300">300GB</option>
    </select>
    </body>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200"){         
        document.getElementById("driveCapacity").value = "4000.0";
        document.getElementById("4000").disabled = false;           
    }else{          
        document.getElementById("4000").disabled = true;            
    }    
</script>

#3

1  

var vals = new Array( 2, 3, 5, 8 );
select_disable_options('add_reklamaciq_reason',vals);
select_disable_options('add_reklamaciq_reason');

function select_disable_options(selectid,vals){
  var selected = false ;
  $('#'+selectid+' option').removeAttr('selected');
  $('#'+selectid+' option').each(function(i,elem){
       var elid = parseInt($(elem).attr('value'));
       if(vals){
           if(vals.indexOf(elid) != -1){
               $(elem).removeAttr('disabled');
               if(selected == false){
                   $(elem).attr('selected','selected');
                   selected = true ; 
               }
           }else{
               $(elem).attr('disabled','disabled'); 
           }
       }else{
            $(elem).removeAttr('disabled');
       }
  });   
}

Here with JQ .. if anybody search it

这里有JQ ..如果有人搜索它

#4

0  

I would like to give you also the idea to disable an <option> with a given defined value (not innerhtml). I recommend to it with jQuery to get the simplest way. See my sample below.

我想给你一个禁用带有给定定义值（不是innerhtml）的

HTML

HTML

Status:  
<div id="option">
   <select class="status">
      <option value="hand" selected>Hand</option>
      <option value="simple">Typed</option>
      <option value="printed">Printed</option>
   </select>
</div>

Javascript

使用Javascript

The idea here is how to disable Printed option when current Status is Hand

这里的想法是当当前状态为Hand时如何禁用Printed选项

var status = $('#option').find('.status');//to get current the selected value
var op = status.find('option');//to get the elements for disable attribute
(status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false;

You may see how it works here:

您可以在这里看到它是如何工作的：

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

#5

-2  

You can also use this function,

你也可以使用这个功能，

function optionDisable(selectId, optionIndices)
{
    for (var idxCount=0; idxCount<optionIndices.length;idxCount++)
    {
        document.getElementById(selectId).children[optionIndices[idxCount]].disabled="disabled";
        document.getElementById(selectId).children[optionIndices[idxCount]].style.backgroundColor = '#ccc';
        document.getElementById(selectId).children[optionIndices[idxCount]].style.color = '#f00';
    }
}
标签：

相关文章