javascript - 根据至少 1/10 被选中的复选框禁用提交按钮

Question

我正在工作的网站的用户有一个电子邮件管理部分。 这将显示他们已发送、非事件和正在处理的电子邮件列表

有一些选项允许选择特定电子邮件并发送它们或使它们处于非事件或事件状态。

我的问题是，如果用户没有选中复选框，他们可以单击这些按钮之一，并且该按钮的 jquery/ajax 会运行，但没有任何内容。

我想阻止这种情况发生，但不知道如何处理多个复选框。

我找到了一个解决方案，它可以满足我对 1 个复选框的需求，而不是说 10 个复选框。如果单击一个然后单击另一个，它将再次禁用该按钮

    <div class='span8' style='padding-bottom:10px;margin-left:0px;'><label class='checkbox'><input title='Select All Sent Emails' type='checkbox' id='selectallsent'>Select All Sent</label>&nbsp;&nbsp;&nbsp;&nbsp;<label class='checkbox'><input title='Select All In Progress Emails' type='checkbox' id='selectallprogress'>Select All In Progress</label><br /><label class='checkbox'><input title='Select All Active Emails' type='checkbox' id='selectallactive'>Select All Active</label>&nbsp;&nbsp;<label class='checkbox'><input title='Select All Inactive Emails' type='checkbox' id='selectallinactive'>Select All In Inactive</label></div>
    <div class='span4' style='padding-bottom:10px;text-align:right;margin-right:0px;vertical-align:top;'><br /><br /><input type="button" onclick="inactive()" class="btn btn-small setInactive" value="Set Inactive">&nbsp;&nbsp;&nbsp;<input type="button" onclick="active()" class="btn btn-small setActive" value="Set Active">&nbsp;&nbsp;&nbsp;<a href="#send_emails" type="button" onclick="sendResend()" role="button" data-toggle="modal" class="btn btn-small">Send / Resend</a></div></form>
    <table id='reviewHistoryTable' class='table table-bordered table-striped'>
    <thead>
    <tr>
        <th align='center' width='2%'></th>
        <th align="center" width="10%">
        Order Id
        </th>
        <th align="center" width="20%">
        Customer Name
        </th>
        <th align="center" width="20%">
        Customer Email
        <th align="center" width="20%" >
        Date Send
    </th>
        <th align='center' width='5%'>
        Type
        </th>
        <th align="center" width="15%" >
        Status
        </th>
     </tr>
      </thead>
      <tbody>
    <?php foreach($histories as $row): ?>

        <tr>
            <td><input type='checkbox' name='<?=$row->service_feedback_email_id?>' class='<?=$row->email_sent?> <?=$row->status?>'></td>
            <td ><?=$row->order_id?></td>
            <td ><?=$row->customer_name?> </td>
            <td ><?=$row->customer_email;?> </td>
            <td><?=$row->date_send;?> </td>
            <td><?=(!$row->review_type || $row->review_type=='store')?"Store":"Product"?></td>
            <td>
            <div id="editEmail_<?=$row->service_feedback_email_id?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editEmailLabel" aria-hidden="true">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Edit Details</h3>
              </div>
              <div class="modal-body" style="height:900px;">

                <form name="editEmail" id="<?=$row->service_feedback_email_id?>" method="post">
                <input type="hidden" value="<?=$row->service_feedback_email_id?>" id="serviceFeedbackEmailId">
                    <label>Order ID</label><input id="orderId_<?=$row->service_feedback_email_id?>" type="text" value="<?=$row->order_id?>" disabled/>
                    <label>Customer Name</label><input id="customerName_<?=$row->service_feedback_email_id?>" class="customerName" name="customerName" type="text" value="<?=$row->customer_name?>"/>
                    <label>Customer Email</label><input id="customerEmail_<?=$row->service_feedback_email_id?>" type="text" value="<?=$row->customer_email?>"/>
                    <div class="input-prepend input-append">   
                        <input name="from_date" type="text" class='datepicker' value='<?=$row->date_send;?>'>
                        <span class="add-on"><i class=' icon-calendar'></i></span>
                    </div><br/>
                </form>
              </div>
              <div class="modal-footer">
                <input type="button" onclick="update()" data-dismiss="modal" class="btn btn-small" value="Update">
                <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
              </div>
            </div>

            </td>

        </tr>
    <?php endforeach; ?>
    </tbody>
    </table>
    <br/>

    <div align='center'><?php echo($paging_link);?></div>
     <!--<table>
        <tr>
            <td>
                <div id="buttons">
                   <!-- <form action="<?=site_url()?>admin/csvexport/exportexitclick" method="post" target="_blank">
                        <input type="hidden" id="query" name="query" value="<?php //echo($query);?>" />
                        <input type="submit" value="Export CSV" name="export-submit" id="export-submit" class="button fr ">

                        <!--<a id="exportcsv" class="button fr " href="" target="_blank">Export CSV</a>
                    </form>
                </div>        
            </td>
        </tr>
    </table>-->   
<?php 
} 
?>
            <div id="send_emails" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="sendEmailLabel" aria-hidden="true">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Send Emails</h3>
              </div>
              <div class="modal-body" style="height:40px;">

              </div>
              <div class="modal-footer">
                <input type="button" onclick="send()" data-dismiss="modal" class="btn btn-small" value="Send New Emails Only">
                <input type="button" onclick="resend()" data-dismiss="modal" class="btn btn-small" value="Resend Old Emails Only">
                <input type="button" onclick="sendall()" data-dismiss="modal" class="btn btn-small" value="Send / Resend All Selected Emails">
                <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
              </div>
            </div>
</div>
<script>
$('span[data-toggle="tooltip"]').tooltip({
    trigger: "hover",
    placement: "right"
});
var selected = new Array();

function sendResend() {
    var selected = Array();
    var selectedSend = $(".no:checked").length;
    var selectedResend = $(".yes:checked").length;
    var totalSendResend = selectedSend + selectedResend;
    $('input:checked').each(function () {
        selected.push($(this).attr('name'));
    });
    if (totalSendResend < 1) {
        $("#send_emails .modal-body").html('You have selected no emails. Please select some emails before proceeding.');
        $("#send_emails .modal-body").css({
            "height": "20px"
        });
    } else {
        $("#send_emails .modal-body").html('You have selected ' + totalSendResend + ' emails. ' + selectedSend + ' New emails will be sent & ' + selectedResend + ' will be resent. Please confirm that you want to proceed?');
    }
}

function send() {
    ajaxEmailQuery($(".no:checked"));
}

function resend() {
    ajaxEmailQuery($(".no:checked"));
}

function sendall() {
    ajaxEmailQuery($(".yes:checked"));
}

function ajaxEmailQuery(data) {
    var selected = Array();
    data.each(function () {
        selected.push($(this).attr('name'));
    });

    $.ajax({
        url: "/b2b/ajaxEmailQuery",
        type: "POST",
        data: {
            data: selected
        },
        success: function (data) {
            alert(data);
            loadFeedbackServiceHistory(1)
        }
    })
}

function inactive() {
    var selected = Array();

    $('input:checked').each(function () {
        selected.push($(this).attr('name'));
    });
    var answer = confirm('Are you sure you want to set these emails as inactive?');
    if (answer) {
        $.ajax({
            url: "/b2b/inactive",
            type: "POST",
            data: {
                data: selected
            },
            success: function (data) {
                alert(data);
                loadFeedbackServiceHistory(1)
            }
        })
    }
}

function active() {
    var selected = Array();

    $('input:checked').each(function () {
        selected.push($(this).attr('name'));
    });
    var disabled = $(".setActive");
    if(selected>0){
        $disabled.removeProp("disabled");
    }        
    var answer = confirm('Are you sure you want to set these emails as active?');
    if (answer) {
        $.ajax({
            url: "/b2b/active",
            type: "POST",
            data: {
                data: selected
            },
            success: function (data) {
                alert(data);
                loadFeedbackServiceHistory(1)
            }
        })
    }
}
$(function () {

    // add multiple select / deselect functionality
    $("#selectallsent").click(function () {
        $('.yes').prop('checked', this.checked);
    });
    $("#selectallprogress").click(function () {
        $('.no').prop('checked', this.checked);
    });
    $("#selectallactive").click(function () {
        $('.active').prop('checked', this.checked);
    });
    $("#selectallinactive").click(function () {
        $('.inactive').prop('checked', this.checked);
    });
    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".yes").click(function () {

        if ($(".yes").length == $(".yes:checked").length) {
            $("#selectallsent").prop("checked", "checked");
        } else {
            $("#selectallsent").removeAttr("checked");
        }

    });
    $(".no").click(function () {

        if ($(".no").length == $(".no:checked").length) {
            $("#selectallprogress").prop("checked", "checked");
        } else {
            $("#selectallprogress").removeAttr("checked");
        }

    });
    $(".active").click(function () {

        if ($(".active").length == $(".active:checked").length) {
            $("#selectallactive").prop("checked", "checked");
        } else {
            $("#selectallactive").removeAttr("checked");
        }

    });
    $(".inactive").click(function () {

        if ($(".inactive").length == $(".inactive:checked").length) {
            $("#selectallinactive").prop("checked", "checked");
        } else {
            $("#selectallinactive").removeAttr("checked");
        }

    });
});

function update() {
    var id = $("#serviceFeedbackEmailId").val();
    var customerName = $("#customerName" + "_" + id).val();
    var customerEmail = $("#customerEmail" + "_" + id).val();
    var answer = confirm('Are you sure you want to update this email? Changes can not be reverted.');
    if (answer) {
        $.ajax({
            type: "POST",
            url: "/b2b/update",
            data: {
                id: id,
                customerName: customerName,
                customerEmail: customerEmail
            },
            success: function (data) {
                alert(data);
                loadFeedbackServiceHistory(1)
            }
        });
    }
}
</script>
<!-- dashboard-content -->

Answer 1

为每个电子邮件输入分配一个类，例如emailInput。这可用于使用 JQuery .each() 方法循环遍历所有复选框输入。

您可以使用 return 提前跳出 .each() 循环。 Reference

示例

$('#SendEmailsBtn' ).click(function () {
  //Loop through checkbox inputs
  $('.emailInput').each(function ( index, domEle) {
    // domEle == this
    //Check if input is checked
    if ($(domEle).is(":checked"))
    {
       SubmitFunction();
       return;  //At least one input is checked exit loop
     }
  });
});