0

我有一个使用 jQuery 的Dropkick样式的表单， 但是一旦表单获得样式，我就无法启用/禁用提交按钮。JS 验证在没有 Dropkick 的情况下按预期工作。

的HTML：

<form method="get" id="dropkickform" action="">
    <select id="min" class="list">
        <option selected="selected" value="">Selection 1</option>
        <option value="1">100</option>
        <option value="2">200</option>
    </select>

    <select id="max" class="list">
        <option selected="selected" value="">Selection 2</option>
        <option value="1">500</option>
        <option value="2">600</option>
    </select>

    <input type="submit" value="Submit"/>
</form>

JS：

$('.list').dropkick();

$(document).ready(function () {
    $form = $('#dropkickform');
    $form.find(':input[type="submit"]').prop('disabled', true);
    $form.find(':input').change(function () {
        var disable = false;
        $form.find(':input').not('[type="submit"]').each(function (i, el) {
            if ($.trim(el.value) === '') {
                disable = true;
            }
        });
        $form.find(':input[type="submit"]').prop('disabled', disable);
    });
});

http://jsfiddle.net/L3FCV/

4

1 回答 1

1

从我可以看到，一旦您应用 dropkick，它就不会select在幕后更新 s，因此您的验证将因此无法工作（selects 始终选择初始选项，请查看 firebug/chrome web 检查器以查看它）。

我已经能够接近http://jsfiddle.net/Qguh5/但它有时会中断。

我用了：

$('.list').dropkick({
    change: function(value, label){
        var disable = true;

        $('.dk_option_current > a').each(function(){
            if($(this).data('dk-dropdown-value')){
                disable = false;
            } else {
                disable = true;
            }
        });

        $form.find(':input[type="submit"]').prop('disabled',disable);
    }
});

该change事件在 dropkick 页面上被提及。

如果您想要自定义外观的表单，我建议您尝试一下http://uniformjs.com 。它可能不如 dropkick 漂亮，但在您的场景中使用起来要容易得多。

于 2013-01-30T11:25:18.217 回答