Question

我有一个使用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/

Answer 1

从我看到你应用dropkick之后，它不会更新幕后的select，因此你的验证将无法正常工作（select s选择了所有的初始选项时间，看一下firebug / chrome网络检查员看看吧。

我已经能够与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那么漂亮，但在你的场景中使用它会容易得多。

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

1 个答案: