jquery - 如果填充了文本框之一，则启用提交按钮

Question

这不能正常工作..因为当我们在其中一个文本字段中输入内容并再次将其设置为空时，提交按钮将被禁用。

只有当我的文本字段之一有值(value)时，我才需要提交按钮才能工作。

测试.html

        <form action=''>
            Location :<input name="location" id="keyword" type='text' /><br>
            Category :<input name="category" id="cat_keyword" type='text'><br>
            <input type="submit" id="loccat" class="send" value="Search">
        </form>

jquery

$(document).ready(function(){
    if ($('#keyword').val() == '' && $('#cat_keyword').val() == '') {
        $('#loccat').attr('disabled','disabled');
    }
    else{
        $('#loccat').removeAttr('disabled');
    }

    //For location textfield
    $("#keyword").keyup(function(){
         if ($('#keyword').val() != '') {
            $('#loccat').removeAttr('disabled');
         }
         else{
                 $('#loccat').attr('disabled','disabled');
         }
     });                               

     //For category textfield
     $("#cat_keyword").keyup(function(){
         if ($('#cat_keyword').val() != '') {
             $('#loccat').removeAttr('disabled');
         }
         else{
             $('#loccat').attr('disabled','disabled');
         }
     });
});

Answer 1

您可能想要为文本框分配一个类，然后使用以下过程:

• 确定填充的文本框数量
• 如果该数字为零，请禁用提交按钮
• 否则启用提交按钮
• 将此代码附加到 input 事件
• 页面加载时触发 input 事件
• 您可以将文本框的数量增加到您想要的任何数量，并且相同的代码仍然有效。

这是代码:

$(document).ready(function() {
    $('.formfield').on('input', function() {
        var nFilled = $('.formfield').filter(function() {
            return $.trim( this.value ) !== '';
        }).length;
        $('#loccat').prop('disabled', nFilled === 0);
    })
    .trigger('input');
});

现在进行演示:

$(document).ready(function() {
    $('.formfield').on('input', function() {
        var nFilled = $('.formfield').filter(function() {
            return $.trim( this.value ) !== '';
        }).length;
        $('#loccat').prop('disabled', nFilled === 0);
    })
    .trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action=''>
  Location :
  <input name="location" id="keyword" type='text' class="formfield" />
  <br>Category :
  <input name="category" id="cat_keyword" type='text' class="formfield" >
  <br>
  <input type="submit" id="loccat" class="send" value="Search">
</form>