web-dev-qa-db-ja.com

jQuery-選択オプションの無効化/有効化

Jquery if条件に関するヘルプが必要です。私は何時間も検索とテストを行ってきましたが、どんな助けも素晴らしいでしょう！このHTMLコードを取得します。

<label id="label1" for="date_from">Value:</label>
<input value="" />

<select id="select1" name="select1">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>

<select id="select2" name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>

そして、このjquery関数：

if ( $('#label1').val() < 3 ) {
           $('select').change(function() {

            $('#select1, #select2').not(this)
                .children('option[value=' + this.value + ']')
                attr('disabled', true)
                .siblings().removeAttr('disabled');

        });
}
else {
    $('select').change(function() {

        $('#select1, #select2').not(this)
            .children('option[value=' + this.value + ']')
            .attr('disabled', false)
            .siblings().removeAttr('disabled');

    });
}

私はjqueryの初心者であり、このコードが機能しないために正しく記述されているかどうかはわかりません。

問題は：

入力値が3未満の場合、select2の選択オプションはselect1と同じであり、select2の残りのオプションは無効です。入力値が3より大きい場合、select1およびselect2のオプションが有効になります。

よろしく、このjquery初心者の投稿を読んでいただきありがとうございます...

jqueryoption
13
Adrian

これを試して：

$(function(){
    $("input").change(function(){
        if ( $(this).val() < 3 ) {
            $('#select2').prop('disabled', true);
            $('#select1').on("change",function() {
                $('#select2').val($(this).val());
            });
        }else {
            $("#select1").off();
            $('#select1, #select2').prop('disabled', false);
        }
    });
});

デモ： http://jsfiddle.net/qhPp7/2/

21
artwl