vérifier ou ne pas vérifier

Question

J'ai besoin d'un peu d'aide. Voici d'abord mon URL: http://fuzzysiberians.com/cfm/testRT.cfm

Tout d'abord, la case à cocher Final ne doit pas être disponible tant que toutes les cases de tâches (1-8) ne sont pas cochées. Deuxièmement, les factures payées ne devraient pas être disponibles tant que la case finale n'est pas cochée.

J'ai quelques problèmes.

1. Je vérifie toutes les tâches. Ensuite, je vérifie la finale. Si je désélectionne l'une des tâches, la finale devrait être décochée et désactivée. Les factures payées devraient également être décochées et désactivées. Pour une raison quelconque, je ne peux pas supprimer ID-9 (final) et ID-10 (factures payées) de ma jtIDList.

J'apprécierai vraiment si quelqu'un peut indiquer ce que je fais mal.

grâce

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

Answer 1

ce semblons travail, case à cocher fonction de clic changé:

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

     }); 

Answer 2

Cela peut être simplifiée si vous ajoutez une classe aux détails, un à la finale et un aux factures payées (ou simplement utiliser l'ID sur les deux derniers) comme:

EDI T: (Notez, si vous ajoutez plus de détails, il s'ajuste aux nouvelles cases à cocher de détail comme je l'ai). Mon exemple est un petit peu verbeux, mais c'est pour montrer clairement l'intention ici.

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

voir travailler ici: http://jsfiddle.net/h682v/1/