Отключить отправку до тех пор, пока не будут установлены флажки

Question

Я пытаюсь включить кнопку отправки, если пользователь проверяет один из четырех флажков.

Вот мой Javascript:

<script> 
$(function() { 
    $('input.required').click(function() { 
     var unchecked = $('input.required:not(:checked)').length; 
     if (unchecked == 0) { 
      $('#submitBtn').removeAttr('disabled'); 
     } 
     else { 
      $('#submitBtn').attr('disabled', 'disabled'); 
     } 
    }); 
}); 
</script> 

Вот мои элементы формы:

  <input class="required" name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off"/> 
      <label for="check1"><span class="style1">Equipment Dropped Off &nbsp; &nbsp; </span></label> 
      <span class="style1"> 
      <input class="required" name="work" type="checkbox" id="check2" value="work"/> 
      <label for="check2">Work performed &nbsp; &nbsp; </label> 
      <input class="required" name="payment" id="check3" type="checkbox" value="payment" /> 
      <label for="check3">Payment Recieved &nbsp; &nbsp; </label> 
      <input class="required" name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" /> 
      <label for="check4">Equipment Picked Up</label> 

    <input class='btn-style' data-rol="none" id="submitBtn" type="submit" name="submitBtn" value="STEP 4 - SAVE SIGNATURE" disabled="disabled"> 

Как только я проверяю ящик, мой браузер консоль показывает: Не удается установить свойство «отключено» в нуль

Что я делаю неправильно?

Answer 1

Вы используете неправильный идентификатор в первом входе

<input class="required" name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" onclick = "document.getElementById('submitBtn').disabled=false;"/> 

Кроме того, вы должны изменить свой яваскрипт кода:

$(function() { 
    $('input.required').click(function() { 
     var checked = $('input.required:checked').length; 
     if (checked != 0) { 
      $('#submitBtn').removeAttr('disabled'); 
     } 
     else { 
      $('#submitBtn').attr('disabled', 'disabled'); 
     } 
    }); 
}); 

Answer 2

Проблема заключается в первом флажком, событие OnClick:

<input class="required" name="equipment_dropped_off" type="checkbox" id="check1" value="equipment_dropped_off" onclick="document.getElementById('submit').disabled=false;" /> 

удалить OnClick событие или изменить его на

onclick="document.getElementById('submitBtn').disabled=false;"