javascript - 表单验证禁用链接

Question

这是 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);

    }
});

Answer 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/