How to uncheck previously checked checkbox?

Question

I have 5 checkboxes and only one is allowed. Lets say user clicks on check box one, but if he clicks on checkbox two, checkbox one has to be unchecked. How can I achieve this?

HTML

 <div class="form-group form-group-custom" id="checkboxes">
        <?php
        foreach ( $education_levels_array as $key => $employee ) {
            echo '
            <div class="checkbox checkbox-inline">
                <input class="educationCheckboxes" type="checkbox" name="userEducationDegree[]" id=0' . $employee['education_id'] . ' value="' . $employee['education_id'] . '" />
                <label for=0' . $employee['education_id'] . '>' . $employee['education'] . '</label>

            </div>';

        }
        ?>
    </div>

I tried to store it in a variable, but right now it won't let me select any options.

var lastChecked;
        $(".educationCheckboxes").on("change", function () {
            console.log(lastChecked);
            if ($(this).prop("checked", true)) {
                lastChecked = $(this);
            }
            lastChecked.prop("checked",false);
        });

This is easy ... ***you use radio buttons***! That's what they are there for. — adeneo, Aug 10 '16 at 14:39
Possible duplicate of [jQuery: make checkboxes act like radio buttons?](http://stackoverflow.com/questions/4697941/jquery-make-checkboxes-act-like-radio-buttons) — Mohammad, Aug 10 '16 at 14:41
store the state of actual checkbox (this) and, before you set true/false, uncheck all checkboxes: $(".educationCheckboxes").each( funciton () { $(this).prop("checked",false); }); — Ricardo Pontual, Aug 10 '16 at 14:46

jonju · Answer 1 · 2016-08-10T14:47:26.513

using change event of all checkboxes with class educationCheckboxes. First check whether currently selected checkbox is checked or not. If it does, then uncheck all checkboxes using class selector with class educationCheckboxes. This will uncheck all checkboxes including the currently selected checkbox then again check the current checkbox. That's it

$('.educationCheckboxes').change(function(){
  if($(this).is(':checked')){
    $('.educationCheckboxes').prop('checked',false);
    $(this).prop('checked',true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="educationCheckboxes">
<input type="checkbox" class="educationCheckboxes">
<input type="checkbox" class="educationCheckboxes">
<input type="checkbox" class="educationCheckboxes">

Mike Scotty · Accepted Answer · 2016-08-10T14:50:27.757

In your code, you're unchecking the current checkbox if it gets checked. You need to change the order in which you're doing things.

var lastChecked = null;
$(".educationCheckboxes").on("change", function () {
    console.log(lastChecked);
    if(lastChecked && lastChecked != $(this)){
        lastChecked.prop("checked", false);
    }
    if ($(this).prop("checked", true)) {
        lastChecked = $(this);
    }
});

How to uncheck previously checked checkbox?

2 Answers2