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

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>