0

我有 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>

查询：

       $('#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();
            }
        });
4

2 回答 2

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

为了将您的<select>元素与页面上的其他<select>元素区分开来，您可以为它们设置通用类名称并使用类选择器而不是标签选择器，如示例所示。

于 2012-10-22T10:43:33.410 回答
1 
$('select').change(function(){
    $('select')
        .not(this)
        .prop({ disabled: true, required: false })
        .css({ background: '#e8e8e8' });
});
于 2012-10-22T10:44:46.743 回答