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

Question

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

Possible duplicate of [How do I check if an array includes an object in JavaScript?](https://stackoverflow.com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript) — jvk, Oct 09 '18 at 06:46
Thank you for the answers you provided guys, I fixed it ---> https://codepen.io/georgie-veloso/pen/yRMzww — Gee, Oct 10 '18 at 01:29

score 0 · Answer 1 · answered Oct 09 '18 at 06:51

first_option.prop("checked") will always check for first element. What you have to do is loop over all elements to check

Like this

$("#tmp_button-99035").click(function(e) {
    var isChecked = false;

    for (var i = 0; i < first_option.length; i++) {
        if (first_option.eq(i).prop("checked")) {
            isChecked = true;
            break;
        }
    }

    if (!isChecked) {
        alert('Please Choose Collar Colour To Continue');
        e.preventDefault();
    }
    return isChecked;
});

score 0 · Accepted Answer · answered Oct 09 '18 at 06:51

0

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

answered Oct 09 '18 at 06:51

Rory McCrossan

331,213
40
305
339

how about it's not a button, it's a anchor link to disable. disable a anchor link if one of the six checkbox is not check – Gee Oct 10 '18 at 06:14
I found this code but unable to work with multiple checkbox ' $("a").click(function(e) { if($("#checkBox").prop("checked") === false) { e.preventDefault(); return false; } else { return true; }; }); ' – Gee Oct 10 '18 at 06:22
This logic will also work fine with an `a` element. If you're struggling it would help to see a full example of your issue. Could you please edit the question to include all relevant code. – Rory McCrossan Oct 10 '18 at 07:51
Thank you Rory, already corrected my my mistake and fixed it. – Gee Oct 11 '18 at 03:58

score 0 · Answer 3 · answered Oct 09 '18 at 07:09

Well, the js snippet of yours is only checking the first element. So, you have to track other checkboxes as well for correct result.

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

$(document).on('click', '#tmp_button-99035', function (e) {
    if ($(first_option).filter(":checked").length == 0) {
        e.preventDefault();
    }
});

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

3 Answers3