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

【问题标题】：How to Disable the combobox values on selection in multiple comboboxes JQuery?如何在多个组合框 JQuery 中禁用选择的组合框值？
【发布时间】：2014-10-28 12:41:30
【问题描述】：

我想在选择多个组合框时禁用组合框中的值。就像我有四个组合框 1、组合框 2、组合框 3、组合框 4，其值为 Select、1、2、3、4 和 5。现在，如果我从组合框 1 中选择值“1”，那么它应该被所有其他组合框禁用。然后如果我从combobox2中选择'2'，那么它应该在combobox1和combobox3中被禁用，并且在combobox3中也禁用值'1'。

更清楚：

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 之外的所有其他组合框，并重置所有其他组合框的索引为 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>

感谢任何帮助。

【问题讨论】：

标签： javascript jquery combobox

【解决方案1】：

<!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>

【讨论】：

效果很好。但我还有一个问题。我已经编辑了同样的问题。请检查。

【解决方案2】：

这在其他“选择”中禁用de选项

$(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;
                    }

                }


            })

        })
    });

【讨论】：

我还有一件事要补充。如果我在每个组合框中都有值“选择”的选择选项，那么我们有四个值“选择”、“1”、“2”、“3”、“4”、“5”。现在，在上面的代码中，如果用户从combobox3中选择值“Select”，那么这个combobox会在每个combobox中禁用这个“Select”值，这是无效的。

【解决方案3】：

你试过 this.prop('disabled', false) 吗？

【讨论】：