Question

我有5个选择菜单，如果选择了任何选择菜单中的一个选项，我想要的所有其他选择菜单：

.prop必须为false
.prop禁用为真
的CSS（ “背景色”， “＃e8e8e8”）;

我已经编写了第一个选择菜单的代码，这个工作正常，我的问题是如何为所有5个选择菜单写这个，以消除任何不必要的代码行。

任何帮助/建议将不胜感激。提前谢谢。

这是我的代码：

        <li id="li_13" >
        <label class="description" for="element_13">A</label>
        <div>
        <select id="element_13" name="element_13" required="required"> 
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

        </select>
        </li>       

        <li id="li_14" >
        <label class="description" for="element_14">B</label>
        <div>
        <select id="element_14" name="element_14" required="required"> 
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

        </select>
        </li>       

        <li id="li_15" >
        <label class="description" for="element_15">C</label>
        <div>
        <select id="element_15" name="element_15" required="required"> 
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

        </select>
        </li>       

        <li id="li_16" >
        <label class="description" for="element_16">D</label>
        <div>
        <select class="element select medium" id="element_16" name="element_16" required="required"> 
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
        </select>
        </li>       

        <li id="li_17" >
        <label class="description" for="element_17">E</label>
        <div>
        <select id="element_17" name="element_17" required="required"> 
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

        </select>
        </li>       

        <li id="li_18" >
        <label class="description" for="element_18">F</label>
        <div>
        <select id="element_18" name="element_18" required="required"> 
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

        </select>
        </div> 
        </li>

JQUERY：

       $('#element_13').change(function(){

        if ($(this).val().length != 0){

                    $('#element_14').prop('required', false);
                    $('#element_15').prop('required', false);
                    $('#element_16').prop('required', false);
                    $('#element_17').prop('required', false);
                    $('#element_18').prop('required', false);

                    $('#element_14').prop('disabled', true);
                    $('#element_15').prop('disabled', true);
                    $('#element_16').prop('disabled', true);
                    $('#element_17').prop('disabled', true);
                    $('#element_18').prop('disabled', true);

                    $('#li_14').css("background-color","#993333");
                    $('#li_15').css("background-color","#993333");
                    $('#li_16').css("background-color","#993333");
                    $('#li_17').css("background-color","#993333");
                    $('#li_18').css("background-color","#993333");
            }
            else{               
                    $('#element_14').prop('required', true);
                    $('#element_15').prop('required', true);
                    $('#element_16').prop('required', true);
                    $('#element_17').prop('required', true);
                    $('#element_18').prop('required', true);

                    $('#element_14').prop('disabled', false);
                    $('#element_15').prop('disabled', false);
                    $('#element_16').prop('disabled', false);
                    $('#element_17').prop('disabled', false);
                    $('#element_18').prop('disabled', false);

                    $('#li_14').css("background-color","#e8e8e8");
                    $('#li_15').css("background-color","#e8e8e8");
                    $('#li_16').css("background-color","#e8e8e8");
                    $('#li_17').css("background-color","#e8e8e8");
                    $('#li_18').css("background-color","#e8e8e8");
            }
        });

以使用类别作为选择者的答案更新（也更好地与显示/隐藏）：

        $(".complaint").on("change", function() {
            if ($(this).val().length != 0){
            $(".complaint").not(this)
              .prop("required", false)
              .prop("disabled", true)
              .closest("li").hide();
             }
        else{
            $(".complaint").not(this)
              .prop("required", true)
              .prop("disabled", false)
              .closest("li").show();
            }
        });

Answer 1

$("select").on("change", function() {
    $("select").not(this)
      .prop({ required : false, disabled : true })
      .closest("li").css("background-color", "#e8e8e8");
});

为了区分您的<select>元素与页面上的其他<select>元素，您可以为它们设置公共类名，并使用class selector代替标记选择器，如示例所示。< / p>

Answer 2

$('select').change(function(){
    $('select')
        .not(this)
        .prop({ disabled: true, required: false })
        .css({ background: '#e8e8e8' });
});

从5个选择菜单中选择1个，然后禁用其余菜单

2 个答案: