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 -->

score 3 · Accepted Answer

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

您可以使用 areturn提前跳出.each()循环。参考

例子

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

score 2 · Accepted Answer

您可以为每个复选框添加一个单击侦听器，当单击一个框时，启用“提交”按钮！

也许不是您要找的东西，但它确实可以完成工作！

另一种选择是使用遍历所有复选框的循环。一旦遇到第一个被选中的框，您就可以停止循环并继续处理数据。

编辑：

伪代码：

for each (checkbox)
{
  var checked = checkbox.checked();
  if (checked)
  {
    submit();
    exit();
  }
}

score 2 · Accepted Answer

如果至少选中了一个复选框，则调用提交函数，否则什么也不做。

$("#SendEmailBtn").click(function(){
    if ($("input:checked").length != 0)
       submit();
}

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

3 回答 3

Related

Reference