在啟用了Dropkick的表單上啟用/禁用提交按鈕？

Question

我有一個用jQuery的Dropkick樣式化的表單，但是一旦表單獲得樣式，就無法啟用/禁用提交按鈕。 無需Dropkick，JS驗證將按預期工作。

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一直都select了初始選項，請在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漂亮，但在您的方案中使用起來容易得多。