How to fix these styles to circumvent reported error?

Question

I am modifying inputs checkbox hiding them and calling labels to receive the function of checked.

As you can see in FIDDLE and also in the codes shown below, when clicking in ascending order, the effect is assigned all the checkeds that are next to the clicked.

However, what I could observe sending $_POST of the form, is that however much of the effect CSS has been assigned, inputs do not become checkeds, then it is a logical error in CSS.

How to leave the effects of label and remove this error from css code logic?

.hidden { display:none }
#checkboxes input[type="checkbox"].drm ~ label {
  float: left;
  cursor: pointer;
  vertical-align: middle;
  margin: 0px 2px 0px 8px;
  width: 37px;
  line-height: 37px;
  text-align: center;
  border: 1px #898989 solid;
  background-color: #FFF;
  color: #3F3F41;
  font-size: 13px;
  text-transform: uppercase;
}

#checkboxes input[type="checkbox"].drm ~ label:hover {
  border:1px #052245 solid;
  background-color:#052245;
  color:#FFF;
}

#checkboxes input[type="checkbox"]:checked.drm ~ label {
  border:1px #052245 solid;
  background-color:#052245;
  color:#FFF;
}

<div id="checkboxes" class="checkboxes ajuste-checkboxes floatright">
  <input id="dorm1" class="hidden drm" type="checkbox" name="dorms[]" value="1">
  <label for="dorm1" class="montserrat fs-16">1</label>										
  <input id="dorm2" class="hidden drm" type="checkbox" name="dorms[]" value="2">
  <label for="dorm2" class="montserrat fs-16">2</label>										
  <input id="dorm3" class="hidden drm" type="checkbox" name="dorms[]" value="3+">
  <label for="dorm3" class="montserrat fs-16">3+</label>
</div>

Answer 1

Using radio Buttons

If you want the 3+ click to include all the previous ones, the ideal is not to use checkbox, but yes radio button, because the semantics of checkbox is an independent selection. The radio button is a value selection only.

In this case you would treat server side previous values. Note that with this technique, the order of items in HTML is reversed, from 3 to 1.

.hidden { display:none }
#checkboxes { float:left }
#checkboxes label {
  float: right;
  cursor: pointer;
  margin: 0px 2px 0px 8px;
  width: 37px;
  line-height: 37px;
  text-align: center;
  border: 1px solid #898989;
  background-color: #FFF;
  color: #3F3F41;
  font-size: 13px;
}

#checkboxes label:hover,
#checkboxes input:checked ~ label {
  border:1px solid #052245;
  background-color:#052245;
  color:#FFF;
}

<div id="checkboxes" class="checkboxes ajuste-checkboxes">
  <input id="dorm3" class="hidden" type="radio" name="dorms" value="3+">
  <label for="dorm3" class="montserrat fs-16">3+</label>
  <input id="dorm2" class="hidden" type="radio" name="dorms" value="2">
  <label for="dorm2" class="montserrat fs-16">2</label>										
  <input id="dorm1" class="hidden" type="radio" name="dorms" value="1">
  <label for="dorm1" class="montserrat fs-16">1</label>										
</div>

Checkboxes independent

If you want to use each checkbox independently, you need to change the selector.

• The selector ~ takes all the following elements.

• The selector + take only the immediately following.

See the difference:

.hidden { display:none }
#checkboxes input[type="checkbox"].drm + label {
  float: left;
  cursor: pointer;
  vertical-align: middle;
  margin: 0px 2px 0px 8px;
  width: 37px;
  line-height: 37px;
  text-align: center;
  border: 1px #898989 solid;
  background-color: #FFF;
  color: #3F3F41;
  font-size: 13px;
  text-transform: uppercase;
}

#checkboxes input[type="checkbox"].drm + label:hover {
  border:1px #052245 solid;
  background-color:#052245;
  color:#FFF;
}

#checkboxes input[type="checkbox"]:checked.drm + label {
  border:1px #052245 solid;
  background-color:#052245;
  color:#FFF;
}

<div id="checkboxes" class="checkboxes ajuste-checkboxes floatright">
  <input id="dorm1" class="hidden drm" type="checkbox" name="dorms[]" value="1">
  <label for="dorm1" class="montserrat fs-16">1</label>										
  <input id="dorm2" class="hidden drm" type="checkbox" name="dorms[]" value="2">
  <label for="dorm2" class="montserrat fs-16">2</label>										
  <input id="dorm3" class="hidden drm" type="checkbox" name="dorms[]" value="3+">
  <label for="dorm3" class="montserrat fs-16">3+</label>
</div>

Answer 2

You need to control this with javascript, I updated your Fiddler, take a look. The estate checked is not accessed by css, the check is only going to the chosen one because the automatic check label mechanism.

Below is a simple code that solves the problem.

$(document).ready(function(){

  $('.montserrat').bind('click',function(){
      var text = $(this).text();
      var triggerCascade = false;

      $.each($('input[type="checkbox"]'),function(idx,obj){

        //Tornar checked true todos após o escolhido
        if(triggerCascade){
            $(obj).attr('checked',true);
        }

        //Identifica o ponto de corte
        if($(obj).val()==text){
          triggerCascade = true;
        }
      });
  });

});