How to correct these styles to get around the reported error?

Using radio buttons

If you want to click on 3+ to include all of the above, the ideal thing is not to use checkbox , but rather radio button , since the semantics of checkbox is independent selection. The radio button is a selection of only one value.

In this case you would treat the server side with the previous values. Note that with this technique, the order of the items in the 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>

Independent checkboxes

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

• The ~ selector takes all of the following elements.

• The selector + picks up only the next one immediately.

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>

    

You need to control this with javascript, I updated your fiddler , take a look. The checked property is not accessed by css, the check is only going to be chosen because the label engine checks it automatically.

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;
        }
      });
  });

});