check or not to check
I need a little bit help. Here is my url : http://fuzzysiberians.com/cfm/testRT.cfm
First, the Final check box should not be available until all of the task (1-8) boxes are checked. Second, the bills paid should not be available until final box is checked.
I have couple problems.
- I check all of the taks. Then, I check final. If I uncheck any of the tasks, the final should be unchecked and disabled. The bills paid should also be unchecked and disabled. For some reason, I cannot remove ID-9 (final) and ID-10 (bills paid) from my jtIDList.
I will really appreciate if somebody can point what I am doing wrong.
thanks
<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"> </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"> </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"> </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"> </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 al开发者_高级运维ign="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"> </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);
});
this seem to work, changed checkbox click function:
$("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);
});
This can be simplified if you add a class to the details, one to the final and one to the bills paid (or just use the ID on the last two) as:
EDIT:(Note, if you add more details, it adjusts to the new detail checkboxes as I have it). My example is a tiny bit verbose, but that is to clearly show the intent here.
$('.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);
};
});
See it working here:http://jsfiddle.net/h682v/1/
加载中,请稍侯......
精彩评论