如何禁用多个组合框JQuery中选择的组合框值？

我想在组合框中禁用多个组合框选择中的值。像我有一个四个combobox1，combobox2，combobox3，combobox4与值选择,1,2,3,4和5. 现在，如果我从combobox1选择值'1'，那么它应该禁用所有其他组合框。然后，如果我从combobox2中选择“2”，那么它应该在combobox1和combobox3中禁用组合框3中的值“1”禁用。如何禁用多个组合框JQuery中选择的组合框值？

更清楚：

Combobox1 - 选择 - 值 '1'
Combobox2 - 选择 - 值 '2'
Combobox3 - 选择 - 值 '3'

现在的结果应该是：

Combobox1 - 已禁用值 - '2'， '3'，但不1/3/4/5
Combobox2 - 已禁用值 - '1'， '3'，但不3/4/5
Combobox3 - 已禁用值 - '1'， '2'，但不3/4/5
Combobox4 - 已禁用值 - '1'， '2'， '3'，但不是4/5

编辑

如果在选择“选择”时选择了Combobox1，则应该禁用除combobox1之外的所有其他combobox，并为所有其他组合框重置具有0索引的所有值。

但是，当我从组合框中选择值1时，组合框2和组合框3禁用它，但是当从组合框2选择值'2'时，值'1'组合框3被启用。

这是我迄今所做的：

HTML代码：

<head> 
    <title>Language test page</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

</head> 

<body> 

<select name="g1" id="select_g1"> 
    <option value="select1">Select</option> 
    <option value="one">one</option> 
    <option value="two">two</option> 
    <option value="three">three</option> 
</select> 

<select name="g2" id="select_g2"> 
<option value="select2">Select</option> 
    <option value="one">one</option> 
    <option value="two">two</option> 
    <option value="three">three</option> 
</select> 

<select name="g3" id="select_g3"> 
<option value="select3">Select</option> 
    <option value="one">one</option> 
    <option value="two">two</option> 
    <option value="three">three</option> 
</select> 



</body> 

</html>

jQuery代码：

<script> 
    $(document).ready(function(){ 
     $('select').on('change', function (e) { 
      $('select option').prop('disabled', false); 
      var optionSelected = $("option:selected", this); 

      var valueSelected = this.value; 

      $("select option:contains('" + valueSelected + "')").each(function(){ 
       if(valueSelected === this.value){ 
        this.disabled = true; 
       }else{ 
        this.disabled = false; 
       } 
      }); 
     }); 
    }); 
</script>

任何帮助表示赞赏。

来源

2014-10-28 k00989

在其他禁用此选项去 “选择”

$(document).ready(function(){ 
     $("select").change(function(e){ 

      var id = $(this).attr("id"); 
      var value = this.value; 

      $("select option").each(function(){ 

       var idParent = $(this).parent().attr("id"); 

       if(id != idParent){ 
        if(this.value == value){ 
         this.disabled = true; 
        } 

       } 


      }) 

     }) 
    });

来源

2014-10-28 13:32:15

我还有一件事要补充。如果我在每个组合框中选择了值“Select”，那么我们有四个值'Select'，'1'，'2'，'3'，'4'，'5'。现在，在上面的代码中，如果用户从combobox3中选择了值“Select”，那么这个组合框将禁用每个组合框中的“选择”值，这是无效的。 – k00989 2014-10-28 14:20:52

它为我解决了问题。谢谢。 – k00989 2014-10-29 10:22:47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" language="javascript"> 


    $(document).ready(function(){ 
     $("select").on("change", function(e){ 
      e.preventDefault();   
      console.log($(this).val()); 
      var valueSelected = $(this).val() 
      $("select option:contains('" + valueSelected + "')").prop("disabled", true); 
     }); 
    }); 

</script> 





</head> 

<body> 



<select name="g1"> 
    <option value="select1">Select</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 

<select name="g2"> 
<option value="select2">Select</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 

<select name="g3"> 
<option value="select3">Select</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 

<select name="g4"> 
<option value="select4">Select</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 



</body> 
</html>

来源

2014-10-28 13:10:24

这工作正常。但我还有一个问题。我编辑了相同的问题。请检查。 – k00989 2014-10-29 06:52:21

你试过用this.prop（'disabled'，false）吗？

来源

2014-10-28 13:12:40 tordo256

如何禁用多个组合框JQuery中选择的组合框值？

回答

相关问题