How to enable submit button if at least two checkboxes are checked?

Question

With the help of answers I found here, I try to disable submit button and send an alert message when clicked on it until there's not at least 2 checkboxes checked.

What I am doing wrong ?

var selected = $('#frmCompare :checkbox:checked').length;

function verifCompare() {
    if (selected >= 2) {
        //good
        $('#frmCompare').submit();
    } else {
        //bad
        alert('Veuillez selectionner au moins 2 produits à comparer...');
        return false
    }
}

$(document).ready(function () {
    $('#btnCompare').attr('disabled', 'disabled');
    $('#frmCompare :checkbox').change(function () {
        //alert(selected);
        if (selected >= 2) {
            $('#btnCompare').attr('enabled');
        }
    });
});

At this point, only alert message works.

Fiddle

EDIT : added fiddle

Answer 1

There is no enabled attribute in HTML.

$('#btnCompare').prop('disabled', selected < 2);

You also need to recalculate the value of selected at every change , you can't just go with what it was set to at page load.

Answer 2

You initialize the count of checked checkboxes just once, when your script is first parsed. The count will not be recomputed later. This line:

var selected = $('#frmCompare :checkbox:checked').length;

should be inside the verification function, not outside.

Answer 3

You should change your code as

$('#frmCompare :checkbox').change(function(){

  //update selected variable
  selected = $('#frmCompare :checkbox:checked').length

  if (selected >= 2) {
     $('#btnCompare').attr('enabled');
  }
});