0

5つの選択メニューがあります。いずれかの選択メニューのオプションの1つが選択されている場合、他のすべての選択メニューで次のことを行います。

  • .propはfalseに必要です
  • .propがtrueに無効化
  • .css（ "background-color"、 "＃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");
            }
        });

セレクターとしてクラスを使用する回答から更新（SHOW / HIDEでもより良い）：

        $(".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 に答える