表单验证禁用链接

时间:2013-06-06 19:43:50

标签: javascript jquery

这是JSfiddle = http://jsfiddle.net/C7Gg3/201/

基本上我会有多种选择。

在加载时我需要它来禁用按钮,如果有任何下拉值=“”。 (这是默认情况。)我尝试了一个文件.ready函数,但没有成功。

然后,一旦所有选项都有值,我想再次启用链接。

我是在正确的道路上吗?

    Reservation
<br/>
<select id="attribute176" name="rReservation" class="">
    <option value="">Choose a Option #1</option>
    <option value="1">Maybe</option>
    <option value="2">Sure</option>
</select><br />
<select id="attribute177" name="rReservation" class="">
    <option value="">Choose a Option #2</option>
    <option value="1">Small</option>
    <option value="2">Big</option>
</select>
<br />
<select id="attribute173" name="rReservation" class="">
    <option value="">Choose a Option #3</option>
    <option value="1">Wide</option>
    <option value="2">Tall</option>
</select>
<br />
<a id="my-link" href="google.com"> GOOGLE HERE </a>

和JS

$("[id^=attribute]").change(function () {
    if ($(this).val() == "") {
        $('[id^=attribute]').addClass('required');
        $('#my-link').bind('click', false);
    } else {
        $('[id^=attribute]').removeClass('required');
        $('#my-link').unbind('click', false);

    }
});

1 个答案:

答案 0 :(得分:1)

只需在变更处理程序的末尾添加.change(),就像这样 -

$("[id^=attribute]").change(function () {
    if ($(this).val() === "") {
        $('[id^=attribute]').addClass('required');
        $('#my-link').bind('click', function (e) {
            e.preventDefault();
        });
    } else {
        $('[id^=attribute]').removeClass('required');
        $('#my-link').unbind('click');

    }
}).change();

演示--> http://jsfiddle.net/C7Gg3/209/