检查或不检查

时间:2010-10-04 17:40:37

标签: jquery

我需要一点帮助。这是我的网址:http://fuzzysiberians.com/cfm/testRT.cfm

首先,在选中所有任务(1-8)框之前,最终复选框不可用。其次,在检查最终方框之前,所支付的账单不可用。

我有几个问题。

  1. 我检查了所有的收入。然后,我检查决赛。如果我取消选中任何任务,则应取消选中并禁用最终结果。支付的账单也应该是未经检查和禁用的。 出于某种原因,我无法从我的jtIDList中删除ID-9(最终)和ID-10(支付账单)。
  2. 如果有人能指出我做错了什么,我将非常感激。

    感谢

            <link rel="stylesheet" type="text/css" href="css/jqModal.css">
        <script type="text/javascript" src="javascript/jquery-1.4.js"></script>
        <script type="text/javascript" src="javascript/jqModal.js" ></script>        
        <script type="text/javascript" src="javascript/jquery.form.js" ></script>
        <script>
        $().ready(function() {
    
            $('#jqmInvoice').jqm({modal: true, 
                          onHide: function(h) {
                              h.w.slideUp("fast",function() { if(h.o) h.o.remove(); }); 
                               $('#jobTypes-10').attr('checked',false);
                          },
                          trigger: false});
    
            $('#jqmReadyCheck').jqm({modal: true, 
                                     onHide: function(h) {
                                     /* callback executed on window hide. Hide notice, overlay. */
                                       h.w.slideUp("fast",function() { if(h.o) h.o.remove(); }); 
                                    $('#jobTypes-9').attr('checked',false);
                                    $('#chk-10').attr('disabled', true);
                                    $('#desc-10').css('color','gray');
                                    },                            
                                    trigger: false});
    
            var arr = [];    
    
    
                $('#jobTypes-9').attr('disabled', true);
                $('#jobTypes-9').attr('checked',false);
                $('#desc-9').css('color','#ccc');
    
    
    
    
    
                $('#jobTypes-10').attr('disabled', true);
                $('#desc-10').css('color','#ccc');
    
    
            $("input[type=checkbox][checked]").each(function() {
                var jtID = $(this).val();
                var inx = $.inArray(jtID, arr);
                if(inx == -1) {
                    arr.push(jtID);
                }
                $("#jtIDList").val(arr);
                isReady(arr);
            });
    
            $("input[type=checkbox]").click(function() {
                var jtID = $(this).val();
                $('#jtIDVal').val(jtID);
                var inx = $.inArray(jtID, arr);
                if (!$(this).is(':checked')) {
                    arr.splice(inx,1);
                    arr.splice($.inArray(9,arr),1);
                    //arr.splice($.inArray(10,arr),1);
    
                    $("#jtIDList").val(arr);
                } else {
                    if( inx == -1) {
                        arr.push(jtID);
                        $("#jtIDList").val(arr);    
                    }
                    if ( jtID == 10 ) {
                        $('#jqmInvoice').jqmShow().css('left',100).css('top',150); 
                    }
    
                }
    
                isReady(arr);
    
            });
    
            function isReady(arr) {
                $('#image').html('jtIDList length:'+arr.length);
                if(arr.length < 8) {
                    $('#desc-9').css('color','#ccc');
                    $('#jobTypes-9').attr('checked',false);
                    $('#jobTypes-9').attr('disabled', true);
    
                    $('#jobTypes-10').attr('checked',false);
                    $('#jobTypes-10').attr('disabled', true);
                    $('#desc-10').css('color','#ccc');
                } else {
                    $('#desc-9').css('color','#000');
                    $('#jobTypes-9').attr('disabled', false);
                }
            }
    
            $('#jobTypes-9').click(function() {
                if ( $(this).is(':checked') ) {
                    $('#jobTypes-10').attr('disabled', false);
                    $('#desc-10').css('color','#000');
                } else {
                    $('#jobTypes-10').attr('checked',false);
                    $('#jobTypes-10').attr('disabled', true);
                    $('#desc-10').css('color','#ccc');
                }
            });
    
    
    
         });
        </script>
    
        <form id="rtForm" name="rtForm" method="post" action="">
        userid: <input type="text" name="unid" id="unid" value="2990" /><br/>
        IDList:<input type="text" name="jtIDList" id="jtIDList" value="" /> <br/>
        selected jtID:<input type="text" name="jtIDVal" id="jtIDVal" value="" /> <br/>        
        pjtIDList:<input type="text" name="pjtIDList" id="pjtIDList" value="2,3,6" /><br/> 
        <div style="float:left; padding-left:10px;">
        <table border="0" width="100%" align="center">
    
            <tr><td colspan="2"><div id="image"></div></td></tr>
            <tr>
                  <td align="left" id="desc-1"  width="90" class="refTbl" >
                      Task 1
                  </td>
                  <td align="left" id="chk-1" width="40" class="refTbl">
                   <input type="checkbox" name="jobTypes" id="jobTypes-1" value="1"   />
                  </td>
    
                  <td width="30">&nbsp;</td>
                  <td align="left" id="desc-2"  width="90" class="refTbl" >
                      Task 2 
                  </td>
                  <td align="left" id="chk-2" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-2" value="2" checked="checked"  />
                  </td>
            </tr>  
            <tr>
                  <td align="left" id="desc-3"  width="90" class="refTbl" >
                      Task 3
                  </td>
                  <td align="left" id="chk-3" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-3" value="3" checked="checked"  />
                  </td>
    
                  <td width="30">&nbsp;</td>
                  <td align="left" id="desc-4"  width="90" class="refTbl" >
                      Task 4
                  </td>
                  <td align="left" id="chk-4" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-4" value="4"   />
                  </td>
            </tr>  
    
            <tr>
                  <td align="left" id="desc-5"  width="90" class="refTbl" >
                      Task 5
                  </td>
                  <td align="left" id="chk-5" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-5" value="5"   />
                  </td>
    
                  <td width="30">&nbsp;</td>
                  <td align="left" id="desc-6"  width="90" class="refTbl" >
                      Task 6
                  </td>
                  <td align="left" id="chk-6" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-6" value="6" checked="checked"  />
                  </td>
            </tr>  
    
            <tr>
                  <td align="left" id="desc-7"  width="90" class="refTbl" >
                   Task 7
                  </td>
                  <td align="left" id="chk-7" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-7" value="7"   />
                  </td>
    
                  <td width="30">&nbsp;</td>
                  <td align="left" id="desc-8"  width="90" class="refTbl" >
                      Task 8
                  </td>
                  <td align="left" id="chk-8" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-8" value="8"   />
                  </td>
            </tr>  
    
            <tr>
                  <td align="left" id="desc-9"  width="90" class="refTbl" >
                      Final
                  </td>
                  <td align="left" id="chk-9" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-9" value="9"   />
                  </td>
    
                  <td width="30">&nbsp;</td>
                  <td align="left" id="desc-10"  width="90" class="refTbl" >
                      Bills Paid
                  </td>
                  <td align="left" id="chk-10" width="40" class="refTbl">
                      <input type="checkbox" name="jobTypes" id="jobTypes-10" value="10"   />
                  </td>
            </tr>  
        </table> 
        </div>
        <div style="clear:both;"></div>
        <div id="formSub" align="right" style="padding-right:20px;">
            <input type="submit" name="btnSaveRT" id="btnSaveRT" class="submitButton save" value="Save" style="margin-left:20px;"/>
        </div>
        </form>
    
    <div id="jqmInvoice" class="jqmWindow" style="width:430px; display:none;">
    <div class="jqmHeader" >
        <div id="jqmInvoiceTitle" style="margin-top:10px;">Confirmation for Paid Bills</div>
        <div id="jqmHeaderClose" style="margin-top:-10px;" >
            <img src="images/vista-close.gif" class="jqmClose" alt="close" />
        </div>
        <div style="clear:both;"></div>
    </div>
         <div class="jqmBody">
         <div class="jqmConfirmContent">
           <div style="float:left; padding-top:20px;">
                  <img src="images\warning.gif" />
           </div>
           <div style="float:left; padding-left:20px; width:300px;">
               <p class="jqmConfirmMsg">
               This will notify the bank that all bills have been paid. 
               </p>
               <p>Do you wish to continue?</p>
           </div>
           <div style="clear:both; height:10px;"></div>
        </div>
            <div style="padding-left:52px;">
            <input type="submit" name="btnNo"  id="btnNo"  class="submitButton no"  value="NO" />
            <input type="submit" name="btnYes" id="btnYes" class="submitButton yes" value="YES" style="margin-left:50px;" />
        </div>
        <div style="height:20px;"></div>
    </div>
    <div class="jqmFooter jqmFooterButtons" id="jqmFooterText">
         </div>
    </div>
    <script>
            $('#btnNo').click(function() {
        $('#jqmInvoice').jqmHide();        
        $('#jobTypes-10').attr('checked',false);
        $('#formSub').html('<input type="submit" name="btnSaveRT" id="btnSaveRT" class="submitButton save" value="Save" style="margin-left:20px;"/>');
    });
    $('#btnYes').click(function() {
        $('#jqmInvoice').jqmHide();
        $('#jobTypes-10').attr('checked',true);
    });                               
    

2 个答案:

答案 0 :(得分:0)

这似乎有用,更改了复选框点击功能:

   $("input[type=checkbox]").click(function() {
            var jtID = $(this).val();
            $('#jtIDVal').val(jtID);
            var inx = $.inArray(jtID, arr);
            if (!$(this).is(':checked')) {
                arr.splice(inx,1);

            for (var i=0; i < arr.length; i++) {
                if(arr[i] == 9) {    
                    arr.splice(i, 1);
                    break;
                }
            }

            for (var i=0; i < arr.length; i++) {
                if(arr[i] == 10) {    
                    arr.splice(i, 1);
                    break;
                }
            }    

                // arr.splice($.inArray(10,arr),1);

                $("#jtIDList").val(arr);
            } else {
                if( inx == -1) {
                    arr.push(jtID);
                    $("#jtIDList").val(arr);    
                }
                if ( jtID == 10 ) {
                    $('#jqmInvoice').jqmShow().css('left',100).css('top',150); 
                }

            }

            isReady(arr);

        });

答案 1 :(得分:0)

如果您在详细信息中添加一个类,一个到最后一个,并且一个到已支付的账单(或者只使用最后两个ID),这可以简化为:

编辑:(注意,如果你添加更多细节,它会根据我的情况调整到新的细节复选框)。我的例子有点冗长,但这是为了清楚地显示这里的意图。

$('.billfinal:checkbox')[0].checked = false;
$('.billspaid:checkbox')[0].checked = false;
$('.billfinal:checkbox').attr('disabled', true);
$('.billspaid:checkbox').attr('disabled', true);

$('.billdetail').click(function() {
    if ($('.billdetail:checked').length < $('.billdetail:checkbox').length) {
        $('.billfinal:checkbox')[0].checked = false;
        $('.billspaid:checkbox')[0].checked = false;
        $('.billfinal:checkbox').attr('disabled', true);
        $('.billspaid:checkbox').attr('disabled', true);
    }
    else {
        $('.billfinal:checkbox').attr('disabled', false);
    };
});
$('.billdetail').trigger('click'); //set value based on initial checked count
$('.billfinal').click(function() {
    if (this.checked) {
        $('.billspaid:checkbox').attr('disabled', false);
    }
    else {
       $('.billspaid:checkbox').attr('disabled', true);
    };
});

在此处查看:http://jsfiddle.net/h682v/1/