javascript - hide a checkbox in function another and disabled all elements to the checkbox disabled - 


<script type="text/javascript"> function checkbox(checkerbox, div) {   if (checkerbox.checked) {     document.getelementbyid(div, urbanoo).style.display = "block"   } else {     document.getelementbyid(div, rurall).style.display = "none"     $("#rurall").find("*").prop("disabled", true);   } }  function checkbox1(checkerbox1, div) {   if (checkerbox1.checked) {     document.getelementbyid(div, rurall).style.display = "block"   } else {     document.getelementbyid(div, urbanoo).style.display = "none"     $("#urbanoo").find("*").prop("disabled", true);   } } </script>

how hide checkbox in function , disabled elements checkbox disabled?

<input name="rural" type="checkbox" onclick="checkbox1(this,'rurall');" /> <input name="urbano" type="checkbox" onclick="checkbox(this,'urbanoo');" />  urbanoo </center>  <div id="urbanoo" style="display:none" >     <g:render template="../domurbano/form"/> </div>

the problem when turn on check box not other box not disabled

<div id="rurall" style="display:none">     </br>     <g:render template="../domrural/form"/> </div>

i think see attempting frankly it's less super clear.

so think want is;

  1. hide other checkboxes if check one
  2. if uncheck box, show other 1 again
  3. show "partner" area if check box
  4. disable other not partner area inputs if check box

i modified markup make easier , added additional show happening. added data element partner input can make simpler , have 1 function; called via event handler , not inline code in markup.

revised markup:

<span class="myinputs"><input class="mycheck" name="rural" type="checkbox" data-partner="#rurall" /> rurall</span> <span class="myinputs"><input class="mycheck" name="urbano" type="checkbox" data-partner="#urbanoo" /> urbanoo</span>  <div id="urbanoo" class="hidden others">the urbannoo   <g:render template="../domurbano/form" />   <input type="textbox"/> </div> <div id="rurall" class="hidden others">the rurall   <g:render template="../domrural/form" />   <input type="textbox"/> </div>

code:

$('.mycheck').on('change', function() {   var amichecked = $(this)[0].checked;   $(this).parent().siblings('.myinputs').toggle(!amichecked);   var pt = $(this).data('partner');// partner selector   $(pt).toggle(amichecked);// show partner in others list   //do enable in partner   $('.others').filter(pt).toggle(amichecked).find("*").prop("disabled", !amichecked);   //do disable in othes list not partner   $('.others').not(pt).find("*").prop("disabled", amichecked); });

play here: https://jsfiddle.net/markschultheiss/clyb103x/1/


Comments

Post a Comment