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

Navigation
0

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

Here's an example in jsfiddle: link

The "SUBMIT" button is not working.

Update - Try 1

Here's jsfiddle: link 

  <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>"
},

Any solution?

    
asked by anonymous 07.02.2017 / 01:50

2 answers

2

I tested using your fiddle de exemplo and I believe I identified the problem.

Find the statement below in your CSS file: 

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

Replace with the following statement: 

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

Then you'll need to slightly alter the organization of the code to display the message in a more pleasant way.

    
07.02.2017 / 05:27
0

I moved a little on your fiddle, treating the items in a slightly different way, but I believe that you achieve the result you are looking for:

link

    
07.02.2017 / 03:29
use of regex in a switch Installation Cartopy