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

I am currently using jQuery to disable the submit button on an edit profile section unless the password field is filled in using the following jQuery.

我目前正在使用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);
        }
    });
}

I also have modal dialog that pops up to show a change password section and I want to disable the submit button on this until data has been entered into the form in a similar way.

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

If I want to disable one button when one field is empty and another when another field is empty, how might I achieve this?

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

HTML as requested:

要求的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>

And a second form in a modal dialog that is the same.

并且模态对话框中的第二种形式是相同的。

2 个解决方案

#1

Have a look at this :

看看这个:

$("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>

EDIT

If the inputs and the buttons are completely apart (in different divs, etc.) you have to set up a little trick to make a connection between them :

如果输入和按钮完全分开(在不同的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>

#2

A better function is

更好的功能是

$('.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);
}

#1