禁用锚链接'<a>&#39; 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;};
});

Answer 1

first_option.prop("checked")将始终检查第一个元素。您要做的就是循环检查所有元素

赞

$("#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;
});

Answer 2

您当前的逻辑不起作用，因为您仅查看所选的第一个元素的checked属性，而不是全部。

要实现所需的功能，可以使用:checked选择器将所有选中的元素放入您提供的选择器中，然后检查结果的length属性以查看是否没有任何。试试这个：

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

Answer 3

好吧，您的js代码段仅检查第一个元素。因此，您还必须跟踪其他复选框以获取正确的结果。

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