Search code examples
javascriptjquerybuttondisable

disable anchor link '<a>' if one of my six checkboxes are not checked


How can I disable a anchor link if one(1) of my six(6) checkbox is not check?

    var first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');

        $("a").click(function(e) {
       if($("first_option").prop("checked") === false) {
        e.preventDefault(); return false;
       } else {return true;};
});

Solution

  • Your current logic doesn't work as you're only looking at the checked property of the first element you select, not all of them.

    To achieve what you require, you can use the :checked selector to get all the checked elements within the selectors you provide, then check the length property of the result to see if there aren't any. Try this:

    var $first_option = $('#pid-1590083, #pid-1590090, #pid-1590091, #pid-1590092, #pid-1590093, #pid-1590094');
    
    $("#tmp_button-99035").click(function(e) {
      if ($first_option.filter(':checked').length === 0) {
        e.preventDefault();
        alert('Please Choose Collar Colour To Continue');
      };
    });