...
Using the JQuery library while making slight modifications to the markup we can achieve simple solutions to both these problems. The following script can be copied toward the top of your htmlform.
Code Block |
---|
<script type="text/javascript" src="../../scripts/jquery/jquery-1.3.2.min.js"></script> <!-- jquery loaded for nonessential purposes. --> <script type="text/javascript"> if(jQuery){ $(document).ready(function(){ if ( $.browser.msie ) { $(":checkbox").click(function(){ $(this).change(); }); } $(".enableDisable").each(function(){ var group = $(this); function disableFn(){ group.children("#disabled").fadeTo(250,0.33); group.children("#disabled").find(":checkbox").attr("checked",false); //uncheck group.children("#disabled").find("input[type$='text']").val(""); group.children("#disabled").find("input").attr("disabled",true); //disable } function enableFn(){ group.children("#disabled").fadeTo(250,1); group.children("#disabled").find("input").attr("disabled",false); } disableFn(); $(this).children("#trigger").find(":checkbox:first").change(function(){ var checked = $(this).attr("checked"); if(checked == true){ enableFn(); }else{ disableFn(); } }); }); $(".checkboxGroup").each(function(){ var group = $(this); var uncheckAll = function(){ group.find("input[type$='checkbox']").attr("checked",false); group.find("input[type$='checkbox']").change(); } var uncheckRadioAndAll = function(){ group.find("#checkboxAll,#checkboxRadio").find("input[type$='checkbox']").attr("checked",false); group.find("#checkboxAll,#checkboxRadio").find("input[type$='checkbox']").change(); } group.find("#checkboxAll").find("input").click( /* This was tricky... A number of things needed to happen Basically, This is supposed to treat a group of inputs as if were all one big checkbox. It is designed so that a checkbox can be next to an input, and the user clicks the input, the checkbox checks as well. But, when the user clicks the checkbox, the browser marks the checkbox as checked. Therefore, when we check if the checkbox is already checked, it always respondes true... We needed to have 2 cases: when the clicking action is on the first checkbox and when the action is on any other. */ function(){ var flip; var checked = $(this).siblings(":checkbox:first").attr("checked"); if($(this).attr("name") == $(this).parents("#checkboxAll:first").find(":checkbox:first").attr("name")){ checked = $(this).attr("checked"); flip = checked; }else{ flip = !checked; } if($(this).attr("type") == "text") if(flip == false) flip = !filp; // this is so the user doesn't go to check the checkbox, then uncheck it when they hit the input. uncheckAll(); $(this).parents("#checkboxAll:first").find(":checkbox").attr("checked",flip); $(this).parents("#checkboxAll:first").find(":checkbox").change(); } ); group.find("#checkboxRadio").find("input[type$='checkbox']").click(function(){ uncheckAll(); $(this).siblings("input[type$='checkbox']").attr("checked",false); $(this).attr("checked",true); $(this).change(); }); group.find("#checkboxCheckbox").click( function(){ uncheckRadioAndAll(); } ); }); }); } </script> |
...
Code Block |
---|
<tr> <td align="right">Toux:</td> <td class="checkboxGroup"> <obsgroup groupingConceptId="1292"> <span id="checkboxAll"><obs conceptId="1734" answerConceptId="107" answerLabel="non" /></span> <span id="checkboxCheckbox" class="enableDisable"> <span id="trigger"><obs conceptId="1293" answerConceptId="107" answerLabel="oui" /></span> <span id="disabled"> durée: <obs conceptId="2160" /> semaine <obs conceptId="2240" /> mois <obs conceptId="1293" answerConceptId="2128" answerLabel="sècheseche" /> <obs conceptId="1293" answerConceptId="970" answerLabel="hémoptysiehemoptysie" /> <obs conceptId="1293" answerConceptId="5957" answerLabel="productive" /> , <obs conceptId="2130" labelText="aspect" /> <obs conceptId="1293" answerConceptId="5960" answerLabel="dyspnéedyspnee" /> </span> </span> </obsgroup> </td> </tr> |
...