Question

我使用此代码添加和删除：disabled提交。但是我知道如何使它具有输入值，但如何使它具有输入功能：检查最后提交的是否是我不理解的复选框。如果所有输入的值都已满，并且需要选中复选框，则需要删除禁用

 $('.contact-form__window').find('.button-red').attr('disabled', 'disabled');

        $('.contact-form__window').find(':input[type="text"],input[type="email"],textarea,input[type="checkbox"]').keyup(function() { // monitor all inputs for changes
            var disable = false;
            $('.contact-form__window').find(':input[type="text"],input[type="email"],textarea,input[type="checkbox"]').each(function(i, el) { // test all inputs for values
                if ($.trim(el.value) === '') {
            
                    disable = true; // disable submit if any of them are still blank
                    
                }
            });
            if(disable == true)
            $('.contact-form__window').find('.button-red').attr('disabled', 'disabled');
            else
            $('.contact-form__window').find('.button-red').removeAttr("disabled");
        });

.button-red {
background: red;
display: block
color: #fff;
}

.button-red:disabled {
 background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="contact-form__window">
<input type="text">
<input type="email">
<textarea></textarea>
<input type="checkbox">

<input type="submit" value="send" class="button-red">
</form>

Answer 1

您必须在input[type=checkbox]上触发事件，以查看是否已选中该事件，然后该按钮将被启用，否则将保持禁用状态。尝试下面的代码-

$('.contact-form__window').find('.button-red').attr('disabled', 'disabled');
$('.contact-form__window').on('keyup, change', 'input, textarea', function() { // monitor all inputs for changes
  var disable = false;
  $('.contact-form__window').find('input,textarea').each(function(i, el) { // test all inputs for values
    if (!disable && ($(el).val().trim() == '')) {
      disable = true; // disable submit if any of them are still blank
    }
    else if(!disable && ($(el).attr('type') == 'checkbox') && (!$(el).prop('checked'))){
      disable = true
    }
  });
  if (disable == true)
    $('.contact-form__window').find('.button-red').attr('disabled', 'disabled');
  else
    $('.contact-form__window').find('.button-red').removeAttr("disabled");
});

.button-red {
  background: red;
  display: block color: #fff;
}

.button-red:disabled {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="contact-form__window">
  <input type="text">
  <input type="email">
  <textarea></textarea>
  <input type="checkbox">

  <input type="submit" value="send" class="button-red">
</form>

如果所有字段均已填满并选中复选框，则从按钮中删除禁用：

1 个答案: