Checkbox Switch - One of them must be marked as true or 1

Question

Example: I have 6 different checkboxes. All of them have name="checkbox[]", one of them must be marked with 1 or true.

Here’s an example in jsfiddle: https://jsfiddle.net/vh8d9un8/14/

The "SUBMIT" button is not working.

Update - Try 1 (Doesn’t work)

Here is jsfiddle: http://jsfiddle.net/VwPaR/1029/

  <div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Material Design Switch Demos</div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">
      Bootstrap Switch Default
      <div class="material-switch pull-right">
        <input id="someSwitchOptionDefault" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionDefault" class="label-default"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Primary
      <div class="material-switch pull-right">
        <input id="someSwitchOptionPrimary" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionPrimary" class="label-primary"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Success
      <div class="material-switch pull-right">
        <input id="someSwitchOptionSuccess" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionSuccess" class="label-success"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Info
      <div class="material-switch pull-right">
        <input id="someSwitchOptionInfo" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionInfo" class="label-info"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Warning
      <div class="material-switch pull-right">
        <input id="someSwitchOptionWarning" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionWarning" class="label-warning"></label>
      </div>
    </li>
    <li class="list-group-item">
      Bootstrap Switch Danger
      <div class="material-switch pull-right">
        <input id="someSwitchOptionDanger" name="checkbox[]" type="checkbox" />
        <label for="someSwitchOptionDanger" class="label-danger"></label>
      </div>
    </li>
  </ul>
</div>

JS:

 $("#myform").validate({
                ignore: ":hidden",
                rules: {
                    "checkbox": { required: true, minlength: 1 },
},
messages: {
"checkbox[]": "<span style=\"color: #a94442;\">Uma das opções deve ser marcada *</span>"
},

Some solution ?

Answer 1

I ran a test using your fiddle de exemplo and I believe I’ve identified the problem.

Find the statement below in your CSS file:

.material-switch > input[type="checkbox"] {
    display: none;
}

Make the replacement by the following statement:

.material-switch > input[type="checkbox"] {
    visibility: hidden;
    position: absolute;
}

Then you will need to change the organization of the code a little to display the message in a more pleasant way.

Answer 2

I tweaked your fiddle a little bit, treating the items a little differently, but I believe it achieves the result you seek:

https://jsfiddle.net/vh8d9un8/15/