尝试禁用单选按钮时javascript无法正常工作

Question

why does my js not working, what i have missed? im trying to make disable radio when i click my radio but its not working

hope someone would help me here thank you

  function tester() { for (var i = 0; i < document.forms[0].elements.length; i++) { if (document.forms[0].elements[i].name == "optradio1") { if (document.forms[0].elements[i].value == "pinjdn") { if (document.forms[0].elements[i].checked == true) { document.forms[0].soptradio[0].disabled = true; document.forms[0].soptradio[1].disabled = true; document.forms[0].soptradio[2].disabled = true; document.forms[0].soptradio[3].disabled = true; } } else if (document.forms[0].elements[i].value == "hibahln") { if (document.forms[0].elements[i].checked == true) { document.forms[0].soptradio[0].disabled = false; document.forms[0].soptradio[1].disabled = false; document.forms[0].soptradio[2].disabled = false; document.forms[0].soptradio[3].disabled = false; } } } } } 

 <div class="col-sm-6 well"> <div class="row"> <form name="form1" method="post" action=""> <table class="table table-striped"> <tr> <th>Beban</th> <th> <label> <input type="radio" name="optradio1" value="rm" id="hide">RM</label> <label> <input type="radio" name="optradio1" value="pinjln" id="show">Pinj LN</label> <label> <input type="radio" name="optradio1" value="localcost" id="show2">Local Cost</label> <label> <input type="radio" name="optradio1" value="pnbp" id="hide2">PNBP</label> <label> <input type="radio" name="optradio1" value="pinjdn" id="show3" onClick="tester()">Pinj DN</label> <label> <input type="radio" name="optradio1" value="hibahdn" id="hide3">Hibah DN</label> <label> <input type="radio" name="optradio1" value="hibahln" id="show4" onClick="tester()">Hibah LN</label> </th> </tr> </table> </form> </div> <div class="row"> <div class="abc"> <div class="col-sm-12"> <form name="form1" method="post" action=""> <table class="table table-striped"> <tr> <div class="radio"> <th>Jenis Bantuan</th> <th> <label> <input type="radio" name="soptradio">Pinjaman Valas</label> <label> <input type="radio" name="soptradio" checked>Pinj. RPLN</label> <label> <input type="radio" name="soptradio">Hibah Valas</label> <label> <input type="radio" name="soptradio">Hibah RPLN</label> </th> </div> </tr> </table> </form> 

that's my code please help me

hope my explanation's clear to everyone

thank you

Answer 1

You have to refer to Forms[1](second form) while disabling. Please see the changed code below:

  function tester() { for(var i=0;i<document.forms[0].elements.length;i++) { if(document.forms[0].elements[i].name=="optradio1") { if(document.forms[0].elements[i].value=="pinjdn") { if(document.forms[0].elements[i].checked==true){ document.forms[1].soptradio[0].disabled=true; document.forms[1].soptradio[1].disabled=true; document.forms[1].soptradio[2].disabled=true; document.forms[1].soptradio[3].disabled=true; } } else if(document.forms[0].elements[i].value=="hibahln") { if(document.forms[0].elements[i].checked==true){ document.forms[1].soptradio[0].disabled=false; document.forms[1].soptradio[1].disabled=false; document.forms[1].soptradio[2].disabled=false; document.forms[1].soptradio[3].disabled=false; } } } } } 

 <div class="col-sm-6 well"> <div class="row"> <form name="form1" method="post" action=""> <table class="table table-striped"> <tr> <th> Beban </th> <th> <label> <input type="radio" name="optradio1" value="rm" id="hide">RM</label> <label> <input type="radio" name="optradio1" value="pinjln" id="show">Pinj LN</label> <label> <input type="radio" name="optradio1" value="localcost" id="show2">Local Cost</label> <label> <input type="radio" name="optradio1" value="pnbp" id="hide2">PNBP</label> <label> <input type="radio" name="optradio1" value="pinjdn" id="show3" onclick="tester()">Pinj DN</label> <label> <input type="radio" name="optradio1" value="hibahdn" id="hide3">Hibah DN</label> <label> <input type="radio" name="optradio1" value="hibahln" id="show4" onclick="tester()">Hibah LN</label> </th> </tr> </table> </form> </div> <div class="row"> <div class="abc"> <div class="col-sm-12"> <form name="form1" method="post" action=""> <table class="table table-striped"> <tr> <div class="radio"> <th> Jenis Bantuan </th> <th> <label> <input type="radio" name="soptradio">Pinjaman Valas</label> <label> <input type="radio" name="soptradio" checked>Pinj. RPLN</label> <label> <input type="radio" name="soptradio">Hibah Valas</label> <label> <input type="radio" name="soptradio">Hibah RPLN</label> </th> </div> </tr> </table> </form> </div> </div> </div> </div>