Question

我想在选择多个组合框时禁用组合框中的值。就像我有四个组合框1，组合框2，组合框3，组合框4，其值选择，1,2,3,4和5。现在，如果我从combobox1中选择值'1'，那么它应该从所有其他组合框中禁用。然后，如果我从组合框2中选择“2”，那么它应该在组合框1和组合框3中禁用，并且在组合框3中也禁用值“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>

感谢任何帮助。

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

Answer 2

您是否尝试过this.prop（'禁用'，false）？

Answer 3

在其他＆＃34;选择＆＃34;

中禁用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;
                    }

                }


            })

        })
    });

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

3 个答案: