如果 jQuery 中未填写给定字段，则禁用提交按钮

Question

我目前正在使用 jQuery 禁用编辑配置文件部分上的提交按钮，除非使用以下 jQuery 填写密码字段。

$('.submitBtn').prop('disabled', true);
$('.requiredInput').keyup(function() {
    checkRequiredFields();
});
function checkRequiredFields() {
    var count = 0;
    $('.requiredInput').each(function(i){
        if( $(this).val() === '')  count++;
        if(count == 0){
            $('.submitBtn').prop('disabled', false);
        }else {
            $('.submitBtn').prop('disabled', true);
        }
    });
}

我也有弹出模式对话框以显示更改密码部分，我想禁用提交按钮，直到以类似方式将数据输入到表单中。

如果我想在一个字段为空时禁用一个按钮，而在另一个字段为空时禁用另一个按钮，我该如何实现？

根据要求提供 HTML：

     <div class='form-group'>
    <div class='row'>
      <div class='col-sm-6'>
        <label for="user_current_password">Current password</label>
        <input class="form-control requiredInput_1" id="user_current_password" name="user[current_password]" type="password" />
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='col-sm-6'>
      <input class="btn btn-success submitBtn_1" name="commit" type="submit" value="Save" />
      <a class="btn btn-default" href="/">Cancel</a>
      <div class='btn btn-warning' data-target='#edit-password' data-toggle='modal' style='float:right;'>Change password</div>
    </div>
  </div>
 </div> 

和模态对话框中的第二种形式相同。

Answer 1

看看这个：

$("input").on('keyup', function(){
    $(this).next().prop('disabled', $(this).val()=="");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input /> <button disabled>ok</button><br>
<input /> <button disabled>ok</button><br>
<input /> <button disabled>ok</button><br>
<input /> <button disabled>ok</button><br>
<input /> <button disabled>ok</button><br>
<input /> <button disabled>ok</button><br>
<input /> <button disabled>ok</button><br>
<input /> <button disabled>ok</button><br>
<input /> <button disabled>ok</button><br>

编辑

如果输入和按钮完全分开（在不同的 div 中等），您必须设置一个小技巧来在它们之间建立连接：

$('input').on('keyup', function(e){
  var target = e.currentTarget.attributes['data-btn'].value; // will give you "btn1" or "btn2"
    
  $("#"+target).prop('disabled', $(this).val()=='');
    
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <div>
          <div>
              <input data-btn="btn1"/>
          </div>
          <br>
           <div>
              <input data-btn="btn2"/>
          </div>
    </div>
    
    <p>
              <input data-btn="btn3"/>
     </p>
    
    <div>
        <button id="btn1" disabled>BUTTON 1</button>
        <button id="btn2" disabled>BUTTON 2</button>
        <div>
            <button id="btn3" disabled>BUTTON 3</button>
        </div>
    </div>      
</div>

Answer 2

更好的功能是

$('.requiredInput_1').keyup(function() {
   checkFun(this, ".submitBtn_1");
});

$('.requiredInput_2').keyup(function() {
   checkFun(this, ".submitBtn_2");
});

function checkFun(a, b)
{
        var subBut = $(b);
        $(a).val()==""?subBut.prop('disabled', true):subBut.prop('disabled', false);
}