Question

我有这个脚本可以启用或禁用提交按钮。我的问题是我想删除当前的类（黄色）并添加一个新的（绿色）如果输入不是空的。我想要改变按钮的价值＆＃34;立即订购！＆＃34;到了＆＃34;继续！＆＃34;。我尝试使用if语句检查字段，但它没有成功，我可以开始工作的唯一部分是否已禁用提交。

我的提交按钮是这样的：

<input type="submit" class="submit-order-btn yellow" value="Order now!">

我的jQuery看起来像这样：

var $submit = $('.submit-order-btn'),
    $inputs = $('input[type=text]');

function checkEmpty() {
    return $inputs.filter(function() {
        return !$.trim(this.value);
    }).length === 0;
}

$inputs.on('blur keyup', function() {
    $submit.prop("disabled", !checkEmpty());
}).blur();

// DEBUG BEGIN \\
$submit.on("click", function() {
        alert("Submitted");
});
// DEBUG END \\

Answer 1

你可以用css做到这一点：

.yellow{
    background-color:green;
}
input[type="submit"]:disabled{
    background-color:yellow;
}

见这里：http://jsfiddle.net/FR75Q/

Answer 2

我不清楚你何时希望课堂和价值发生变化，你的意思是这样吗？

$inputs.on('blur keyup', function() {
    $submit.prop("disabled", !checkEmpty());

    if (!checkEmpty()) {
        $submit.removeClass('yellow').addClass('green');
        $submit.val('Proceed!');
    } else {
        $submit.removeClass('green').addClass('yellow');
        $submit.val('Order now!');
    }
}).blur();

Answer 3

您的意思是.addClass('')和.removeClass('')？示例：http://fiddle.jshell.net/AJLsz/

如何在此jQuery代码之间添加和删除类？

3 个答案: