Search code examples
javascripthtmlradio-buttonhta

Radio buttons and checkboxes javascript


I have the below code.

2 radio buttons that enable+tick their checkboxes when selected and disable+untick them when the other radio button is clicked.

The code is working fine as a HTA but fails to work properly as a HTML. Knowing that the final app will be HTA, do I have to worry about the code not working fully in HTML?

Many thanks.

<table border=1>
<tr>
    <td>
        <form name="phaseform" action=""><font size=2>
        <input type="radio" name="phase" value="1" id="phase" onclick="checkbox(0)" />
            <label for="phase1">Phase 1</label>
    </td>
    <td><font size=2>
        <input type="radio" name="phase" value="2" id="phase" onclick="checkbox(1)" />
            <label for="phase2">Phase 2 (after 17 days)</label>
    </td>
</tr>
<tr>
    <td><font size=2>
        <input type="checkbox" disabled id="TerminateP1" name="TerminateP1" value="IN">Terminate AD account<br>
        <input type="checkbox" disabled id="MailboxAccessP1" name="MailboxAccessP1" value="IN">Grant mailbox access to manager<br>
    </td>
    <td><font size=2>
        <input type="checkbox" disabled id="TerminateP2" name="TerminateP2" value="IN">Fully terminate AD account<br>
        <input type="checkbox" disabled id="DisableMailboxP2" name="DisableMailboxP2" value="IN">Disable mailbox<br>
    </td>
</tr>
</form>

<script type="text/javascript">
function checkbox(val)
    {
        document.phaseform.TerminateP1.setAttribute("disabled",1) 
        document.phaseform.MailboxAccessP1.setAttribute("disabled",1)
        document.phaseform.TerminateP2.setAttribute("disabled",1) 
        document.phaseform.DisableMailboxP2.setAttribute("disabled",1)
        document.phaseform.TerminateP1.setAttribute("checked",0)
        document.phaseform.MailboxAccessP1.setAttribute("checked",0)
        document.phaseform.TerminateP2.setAttribute("checked",0)
        document.phaseform.DisableMailboxP2.setAttribute("checked",0)

        if(val)
        {
            document.phaseform.TerminateP2.removeAttribute("disabled",val) 
            document.phaseform.DisableMailboxP2.removeAttribute("disabled",val)
            document.phaseform.TerminateP2.setAttribute("checked",1)
            document.phaseform.DisableMailboxP2.setAttribute("checked",1)
            }
        else
        {
            document.phaseform.TerminateP1.removeAttribute("disabled",val)
            document.phaseform.MailboxAccessP1.removeAttribute("disabled",val)
            document.phaseform.TerminateP1.setAttribute("checked",1)
            document.phaseform.MailboxAccessP1.setAttribute("checked",1)
        }
    }
</script>

Solution

  • Try

    function checkbox(val) {
        var isone = !!val, istwo = !val;
        document.phaseform.TerminateP1.disabled = isone;
        document.phaseform.MailboxAccessP1.disabled = isone;
        document.phaseform.TerminateP2.disabled = istwo;
        document.phaseform.DisableMailboxP2.disabled = istwo;
        document.phaseform.TerminateP1.checked = !isone;
        document.phaseform.MailboxAccessP1.checked = !isone;
        document.phaseform.TerminateP2.checked = !istwo;
        document.phaseform.DisableMailboxP2.checked = !istwo;
    }
    

    Demo: Fiddle