Question

如果用户开始在input1中键入值，我想禁用input2。

如果input1中没有值（例如，如果删除了值），我还希望重新启用input2。

这是我到目前为止所写的内容，但它不起作用。

<input id="input1" type="text">
<input id="input2" type="text">

<script>
            $( document ).ready(function() {
            if($('#input1').val())
            {
                $('#input2').prop('disabled', true);
            }
        });
</script>

Answer 1

Bind＆＃34;输入＆＃34;和＆＃34; propertychange＆＃34;像这样：

＆＃13;

let secondInput = $('#input2'); // Cache the jQuery element
$("#input1").on(
    "input propertychange",
    event => secondInput.prop(
        'disabled',
        event.currentTarget.value !== "")
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1" type="text">
<input id="input2" type="text">

＆＃13;

这甚至适用于复制/粘贴，拖入和所有其他方法。

propertychange不是必须的，但它适用于IE支持。

Answer 2

如果您想要在第一个输入被禁用时禁用第二个输入，您可以侦听键盘并将禁用更改为true。在示例中，我只在第一个输入不为空时才这样做。

<input id="input1" type="text">
<input id="input2" type="text">

<script>
    $( document ).ready(function() {
        $('#input1').on('keyup', function(e){
            if(e.target.value.length > 0){
              $('#input2').prop('disabled', true);
            }else{
              $('#input2').prop('disabled', false);
            }
        });
    });

</script>

Answer 3

此答案包括以上答案的优点

<input id="input1" type="text">
<input id="input2" type="text">
$(document).ready(function () {
        $('#input1').attr("disabled", true);
        $('#input2').on("input propertychange", function (e) {
            if ($('#input2').val()) {
                $('#input1').removeAttr('disabled');
            } else {
                $('#input1').attr('disabled', true);
            }
        });
    });

如果另一个字段具有值（动态），则使用jquery禁用字段

3 个答案: