Grails Radio Buttons arrangement

Question

Hi I am making four radio buttons which are dependent on each other.

The buttons are First, second, A, B

First    Second
A         B

the buttons are like if we select First then only First is select and the buttons A and B becomes disable. if we select Second then both A and B becomes enable and we can select one button from them.

<g:radioGroup name="RadioGrails"
              labels="['First','Second']"
              values="[1,2]">
<label>
        <span class="radioSpan">${it.radio}</span>
        ${it.label}
</label>
</g:radioGroup>

The radio buttons for A and B

<g:radioGroup name="ABRadioButtons"
                  labels="['A','B']"
                  values="[1,2]">
    <label>
            <span class="radioSpan">${it.radio}</span>
            ${it.label}
    </label>
    </g:radioGroup>

Answer 1

I would use :

(of course, you have to set the initial state of the second radioGroup...)

<g:radioGroup class="radiograils" name="RadioGrails" labels="['First','Second']" values="[1,2]">
    <label>
        <span class="radioSpan">
            ${it.radio}
        </span> ${it.label}
    </label>
</g:radioGroup>

<g:radioGroup class="abradiobuttons" name="ABRadioButtons" labels="['A','B']" values="[1,2]">
    <label>
        <span class="radioSpan">
            ${it.radio}
        </span> ${it.label}
    </label>
</g:radioGroup>

<script src="${request.contextPath}/js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
    $('.radiograils').change(function() {
        if ($(this).val() == 2) {
            $('.abradiobuttons').prop('disabled', false);
        } else {
            $('.abradiobuttons').prop('checked', false);
            $('.abradiobuttons').prop('disabled', true);
        }
    });
</script>