Question

其实我想设置复选框选择的限制。使用下面的脚本我将复制每行的列（1），检查到div（摘要）。

JAVASCRPIT

<script>
     var tableControl = document.getElementById('order-table');
     $('#jqcc').click(function () 
     {
     var result = []               
     var count = 
     document.querySelectorAll('input[type="checkbox"]:checked').length;
     var limit = 2;

        $('input:checkbox:checked', tableControl).each(function () {                
            result.push($(this).parent().next().text() + "," + "<br>");                                       
        });

    $("#Summary").html(result).show();

   });
</script>

HTML

            <div class="form-group" id="jqcc">
            <table id="order-table" name="order-table">
               <tr>
                   <th>Select</th>
                   <th>Medication</th>
                   <th>Max Issue Limit</th>
                   <th>Quantity</th>
                   <th>X</th>
                   <th>Unit Price</th>
                   <th>=</th>
                   <th>Totals</th>
               </tr>
               <tbody id="contacts">
                    <tr class='odd'>
                    <td><input type='checkbox' class='single-checkbox'></td>
                    <td class='product-title'>" + item.Name + "</td>
                    <td>" + item.MaxIssueLimit + "</td>
                    <td class='hours'><input type='text' class='hours' oninput='calculate()'></input></td>
                    <td class='times'>X</td>
                    <td class='rate'><input type='text' class='rate' value=" + item.UnitPrice + " oninput='calculate()' disabled='disabled'/></td>
                    <td class='equals'>=</td>
                    <td class='date-total'><input type='text' class='date-total'  disabled='disabled'/></td>
                    <td class='med' style='display:none'>" + item.MedicationID + "</td>
                    </tr>
                    <tr class='odd'>
                    <td><input type='checkbox' class='single-checkbox'></td>
                    <td class='product-title'>" + item.Name1 + "</td>
                    <td>" + item.MaxIssueLimit1 + "</td>
                    <td class='hours'><input type='text' class='hours' oninput='calculate()'></input></td>
                    <td class='times'>X</td>
                    <td class='rate'><input type='text' class='rate' value=" + item.UnitPrice + " oninput='calculate()' disabled='disabled'/></td>
                    <td class='equals'>=</td>
                    <td class='date-total'><input type='text' class='date-total'  disabled='disabled'/></td>
                    <td class='med' style='display:none'>" + item.MedicationID + "</td>
                    </tr>
                    <tr class='odd'>
                    <td><input type='checkbox' class='single-checkbox'></td>
                    <td class='product-title'>" + item.Name2 + "</td>
                    <td>" + item.MaxIssueLimit2 + "</td>
                    <td class='hours'><input type='text' class='hours' oninput='calculate()'></input></td>
                    <td class='times'>X</td>
                    <td class='rate'><input type='text' class='rate' value=" + item.UnitPrice + " oninput='calculate()' disabled='disabled'/></td>
                    <td class='equals'>=</td>
                    <td class='date-total'><input type='text' class='date-total'  disabled='disabled'/></td>
                    <td class='med' style='display:none'>" + item.MedicationID + "</td>
                    </tr>              
                </tbody>
            </table>
            </div>

          <div class="col-md-4">
          <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject font-blue bold uppercase">
                        Summary
                    </span>
                </div>
            </div>                              
            <div id="Summary" style="font-size:medium;">                   
            </div>
            <br>                
          </div>
          </div>

现在，我想设置复选框选择限制。所以，当我尝试使用if条件设置限制时。我可以设置限制，但是当我尝试点击超过限制时，复制的Div（摘要）内容也会被禁用。

那么，如何设置限制而不会丢失div中的复制内容（摘要）？

任何帮助表示赞赏。感谢

Answer 1

嗯，有很多方法可以解决这个问题

最简单的，我认为，有一个var可供所有javascript函数使用，它们只计算唯一的作用是计算用户已经进行的检查次数。

只要复选框的Class为change(d)

，请执行此操作

例如：

在一个看起来像这样的HTML：

        <input type="checkbox" id='cb1' class='chkGroup'> Check1
        <input type="checkbox" id='cb2' class='chkGroup'> Check2

你可以像这样检查jquery

        var totChecks = 0;
        $('.chkGroup').on('change', function() {
              if($(this).prop("checked") == true)
              {
                 if(totChecks > 2){
                   /*cancel your action*/
                   console.log("too many checks!");
                   return false;
                 }
                 /*otherwise, proceed*/
                 totChecks = totChecks + 1;
              }
             else //checkbox is unchecked, so remove a point from totChecks.
              {
                totChecks = totChecks - 1;
              }
        });

设置复选框选择限制（仅允许选择2）

1 个答案: