下拉菜单验证

时间:2013-09-11 06:23:25

标签: javascript jquery grails

我有一个国家的下拉菜单 <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');
            }
         });
     });

1 个答案:

答案 0 :(得分: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/