在启用 dropkick 的表单上启用/禁用提交按钮？

Question

我有一个带有 jQ​​uery 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/

Answer 1

据我所知，一旦您应用 dropkick，它就不会在幕后更新 selects，因此您的验证将无法正常工作（selects 始终选择初始选项，有一个在 firebug/chrome web inspector 中查看）。

我已经能够接近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);
    }
});

dropkick 页面上提到了change 事件。

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