Question

我有2个输入。首先输入url类型。第二个输入file类型。我想在第二个有值时禁用第一个输入。第二个输入有值时的相同行为。我尝试了下一个代码，但它无法正常工作。我的错误在哪里？

＆＃13;

 $("#src").keyup(function(){
        if($('#src').val()){
            $("#src_url").toggleClass("disabled-field");
        }
    });
    $("#src_url").keyup(function(){
        if($('#src_url').val()){
            $("#src").toggleClass("disabled-field");
        }
    });

＆＃13;

 .disabled-field{
        pointer-events: none;
        opacity: 0.5;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="src_url" class="form-control" id="src_url" type="url">
    
    <input name="src" id="src" accept=".pdf, .zip, .rar, .doc, .docx, .rtf" type="file">

＆＃13;

解决方案：

$("#src_url").on("input", function() {
    $("#src").prop("disabled", !!$('#src_url').val());
    $("#src").toggleClass("disabled-field", !!$('#src_url').val());
});

$("#src").on("change", function() {
  $("#src_url").prop("disabled", !!$('#src').val());
    $("#src_url").toggleClass("disabled-field", !!$('#src').val());
});

Answer 1

当您有一个值时，您就会切换课程，这意味着在keyup {}}上添加课程，在下一个keyup它上面。将它删除等等。如果没有价值，你可以完全不管它。请参阅：http://api.jquery.com/toggleClass。

您可能想要使用the two-argument version而不是if：

$("#src_url").toggleClass("disabled-field", !!$('#src').val());

请注意!!将truthy / falsy值转换为true或false。

我会注意到禁用字段的正确方法是disabled属性，而不是类。要使用它，请使用prop：

$("#src_url").prop("disabled", !!$('#src').val());

如果输入有值，则禁用项目？

1 个答案: