javascript - 下拉菜单验证

Question

我有一个国家的下拉菜单 <g:select class="ddlCountry" id="country" name="country.id" from="${Country.list()}" noSelection="['':'-Select-']" optionKey="id" required="" value="${countryInstance?.id}" class="many-to-one" />

和一个提交按钮如下

<button class="submit_small" >
                                <g:link class="ggg" controller="country" action="wholeTestUnits"
                                    id="${countryInstance?.id}">
                                    <g:message code="default.button.addTest.label" />
                                </g:link>
                                </button>

我想在 null 选项或选定索引为 0 时禁用按钮，并希望在索引增加时启用

我尝试了如下的javascript函数，但它不起作用，因为按钮由标签组成

<script type="text/javascript">
    $(document).ready(function() {
         $('button.submit_small').attr('disabled','disabled');
         $('#country').change(function() {
            if($(this).val() != '') {
               $('button[class="submit_small"]').removeAttr('disabled');
            }
         });
     });

Answer 1

除了按钮之外，您还应该禁用链接。

此代码应该可以工作：

$(function() {
    var button = $('.submit_small').prop('disabled', true),
        link = button.find('a');

    $('#country').on('change', function(event) {
        if (event.currentTarget.value != '') {
            button.prop('disabled', false);
            link.off('.quiz');
        }
    });

    link.on('click.quiz', function(event) {
        if (button.prop('disabled')) {
            event.preventDefault();
        }
    });
})

关于 jsfiddle 的示例：http: //jsfiddle.net/ant_Ti/hYNxs/