javascript - 2 番目の入力フィールドの入力に基づいて 1 つの入力フィールドを無効にする

Question

2 つの入力テキスト フィールドがあります。ユーザーが A 入力テキスト フィールドに任意の値を入力しようとすると、B 入力フィールドを無効にして、B フィールドに入力できないようにする必要があります。同様に、ユーザーが B 入力フィールドに入力を試みた場合、A 入力フィールドを無効にする必要があります。Jqueryでコードを書く方法を教えてください

Answer 1

と の入力フィールド名を使用AしBます。

$('input[name="A"]').on('change', function(){
    if($(this).val() !== ''){
        $('input[name="B"]').attr('disabled', 'disabled');
    }else{
        $('input[name="B"]').removeAttr('disabled');
    }
});
$('input[name="B"]').on('change', function(){
    if($(this).val() !== ''){
        $('input[name="A"]').attr('disabled', 'disabled');
    }else{
        $('input[name="A"]').removeAttr('disabled');
    }
});

Answer 2

どちらの答えも正しいですが、コードを短くすることにしました:

    $('input.inputA').keyup(function () {
        $('input.inputB').prop('disabled', this.value.length === 0 ? false : true);
    });

    $('input.inputB').keyup(function () {
        $('input.inputA').prop('disabled', this.value.length === 0 ? false : true);
    });

デモ: http://jsfiddle.net/AnDxC/

Answer 3

想定

<input type="text" class="inputA" />
<input type="text" class="inputB" />

およびJS：

$(function(){
    $("input").on("keyup", function(){
            if($(this).hasClass("inputA") && $(".inputA").val()){
               $("input.inputB").prop("disabled", true);
               $("input.inputA").prop("disabled", false);
            } else if($(this).hasClass("inputB") && $(".inputB").val()){
               $("input.inputA").prop("disabled", true);
                $("input.inputB").prop("disabled", false);
            } else {
                       $(".inputA, .inputB").prop("disabled", false);
                    }
    });
});

Jsフィドル

Answer 4

次の HTML がある場合:

<input type="text" name="test1" id="test1" value=""/>
<input type="text" name="test2" id="test2" value=""/>

私の解決策は次のとおりです。

<script>
$(function(){
    $('#test1, #test2').keyup(function(){
        var $test1 = $('#test1');
        var $test2 = $('#test2');
        $test1.prop('disabled', $test2.val() && ! $test1.val());
        $test2.prop('disabled', $test1.val() && ! $test2.val());
    });
});
</script>

これが例です