检查或不检查

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

首先，最终复选框应该在所有任务（1-8）框被选中之前不可用。其次，支付的账单在最后一个箱子被检查之前不应该可用。

我有几个问题。

我检查所有的taks。然后，我检查最后。如果我取消选中任何任务，最终应该取消选中并禁用。支付的账单也应该没有检查和禁用。出于某种原因，我无法从我的jtIDList中删除ID-9（最终）和ID-10（支付账单）。

如果有人能指出我做错了什么，我将非常感激。

感谢

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

来源

2010-10-04 CFNinja

请改为只张贴的链接代码。谢谢。 – user113716 2010-10-04 17:42:59

好吧，它是jQuery，所以代码都在那里... – 2010-10-04 17:49:26

更新了我的代码，修复了第一个问题。新问题是，如果所有的任务都被选中，那么它应该使最终的盒子可用。 – CFNinja 2010-10-04 17:50:59

这似乎工作，改变复选框点击功能：

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

     });

来源

2010-10-04 18:23:34 CFNinja

'输入：复选框'是一个更快的写和更容易阅读选项与'输入[类型=复选框]'==> http://api.jquery.com/checkbox-selector/ – 2010-10-04 19:30:46

这可以，如果你添加一个类的细节，一个到最后被简化和一个支付账单（或只是使用最后两个ID）：

EDI T :(注意，如果您添加更多详细信息，则会根据我的具体情况调整为新的详细复选框）。我的例子有点冗长，但这是为了清楚地表明这里的意图。

$('.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/

来源

2010-10-04 21:06:11

非常好。编辑你的jsfiddle以包含：$（'。billspaid：checkbox'）。attr（'checked'，false）; – CFNinja 2010-10-06 16:49:17

我明白你的观点，但我不想做出这样的假设，并且它被设置在代码的原始第2行。注：我使用不同的方法来设置值，只是为了显示一个例子，您的语法也可以设置值。 – 2010-10-07 17:57:04

使其完成您编辑的链接：http://jsfiddle.net/h682v/2/ – 2010-10-07 17:58:42

检查或不检查

回答

相关问题