Grails 单选按钮排列

Question

您好，我正在制作四个相互依赖的单选按钮。

按钮是第一、第二、A、B

First    Second
A         B

按钮就像我们 select First 那么只有 First 是 select 并且按钮 A 和 B 变为禁用。如果我们 select Second 那么 A 和 B 都会启用，我们可以 select 他们的一个按钮。

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

A 和 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

我会使用：

（当然要设置第二个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>

Grails 单选按钮排列

Grails Radio Buttons arrangement

javascript

jquery

grails

gsp