确保至少有1个复选框被选中

Question

我有一张表格供员工在发布工单时使用。它有一个名为“受影响部门”的部门，有5个部门。在表单发送之前，至少必须先检查1个部门。我有这部分工作，但错误信息只会消失，如果第一个复选框被选中，但即使第二个或第三个复选框被选中，仍然在那里。即使在检查部门时错误没有消失，该表单也会按预期工作。

我只想让错误消失，如果任何复选框被选中。

的jQuery：

// Check if at least 1 "Departments Affected" checkbox has been checked. 
      $.validator.addMethod('require-one', function(value) { 
       return $('.require-one:checked').size() > 0; 
      }, "Pick at least 1 affected deparment before you save.<br />"); 
      var checkboxes = $('.require-one'); 
      var checkbox_names = $.map(checkboxes, function(e, i) { 
       return $(e).attr("name"); 
      }).join(" "); 

     $('#workorder2').validate({ 
      errorLabelContainer: ".formerror", 
      rules : { 
       "workorder[kickoff_changing]" : 'required', 
       "workorder[rnd]" : 'required', 
       "workorder[is_tryout]" : 'required', 
       "workorder[is_final_shipment_offshore]" : 'required', 
       "workorder[is_final_shipment_customer]" : 'required', 
       groups: { 
        checks: checkbox_names 
       } 

      }, 
      errorPlacement: function(error, element) { 
       element.siblings('.error').html(error); 

      }, 
      submitHandler: function (form) { 
       console.log($('#work_direction')); 

       if(!confirm('Are you sure you want to save this workorder?')){ 
        return false; 
       } 
       console.log($(form).valid()); 
       form.submit(); 
      } 

HTML：

<tr> 
         <th>Departments Affected?</th> 
         <td> 
          <ul style="list-style-type:none;"> 
           <li> 
           <span class='error'></span> 
            <input id="cad" type="checkbox" name="workorder[affect][cad]" class="require-one"/> 
            <label>Cad (name1, name2)</label> 
           </li> 
           <li> 
            <input id="design" type="checkbox" name="workorder[affect][design]" class="require-one" /> 
            <label>Design (name)</label> 
           </li> 
           <li> 
            <input id="shop" type="checkbox" name="workorder[affect][shop]" class="require-one" /> 
            <label>Shop (name)</label> 
           </li> 
           <li> 
            <input id="cnc" type="checkbox" name="workorder[affect][cnc]" class="require-one" /> 
            <label>CNC (name)</label> 
           </li> 
           <li> 
            <input type="checkbox" name="workorder[affect][acc]" class="require-one" /> 
            <label>Accounting (name)</label> 
           </li> 
           <li> 
            <input type="checkbox" name="workorder[affect][china]" class="require-one" /> 
            <label>Offshore (name1, name2)</label> 
           </li> 
          </ul> 
         </td> 
        </tr> 

我在做什么错？我试过将<span class="error"></span>放在标签上方，但它仍然不起作用。

Answer 1

想通了我的问题。我搬到

groups: { 
      checks: checkbox_names 
     } 

出

$('#workorder2').validate({ 
    errorLabelContainer: ".formerror", 
    rules : { 
     "workorder[kickoff_changing]" : 'required', 
     "workorder[rnd]" : 'required', 
     "workorder[is_tryout]" : 'required', 
     "workorder[is_final_shipment_offshore]" : 'required', 
     "workorder[is_final_shipment_customer]" : 'required', 
     groups: { 
      checks: checkbox_names 
     } 

    }, 

所以现在看起来

$('#workorder2').validate({ 
    errorLabelContainer: ".formerror", 
    rules : { 
     "workorder[kickoff_changing]" : 'required', 
     "workorder[rnd]" : 'required', 
     "workorder[is_tryout]" : 'required', 
     "workorder[is_final_shipment_offshore]" : 'required', 
     "workorder[is_final_shipment_customer]" : 'required', 
    }, 

    groups: { 
      checks: checkbox_names 
    }, 

谢谢大家试图帮助！

Answer 2

这个怎么样？

$(document).ready(function() { 
    $('#MY_FORM_ID').submit(function() { 
     var $fields = $(this).find('input[class="require-one"]:checked'); 
     if (!$fields.length) { 
      $('span.error').html("Kindly select at least one option"); 
      return false; // The form will *not* submit 
     } else { $('span.error').html(""); return true; } 
    }); 
});