Question

我的表单包含大约4个输入字段：cash，credit_card，gift_cert和total。如果三个字段（cash, credit_card, gift_cert）的总和不等于输入字段（total），我想隐藏提交按钮。我想我差不多了，但我的问题在于当我试图减少总和时，addClass不起作用。

这是jsfiddle。

HTML

<form>
    <input type="text" name="cash" value="0.00">
    <br />
    <input type="text" name="credit_card" value="0.00">
    <br />
    <input type="text" name="gift_cert" value="0.00">
    <br />
    <input type="text" name="total" value="100">
    <br />
    <input type="submit" name="submit" class="test" value="Save">
</form>

JS：

$(':input').bind('keypress keydown keyup change', function () {

    var total = parseFloat($(':input[name="total"]').val(), 10),
        cash = parseFloat($(':input[name="cash"]').val(), 10),
        credit_card = parseFloat($(':input[name="credit_card"]').val(), 10),
        gift_cert = parseFloat($(':input[name="gift_cert"]').val(), 10),
        payment = (cash + credit_card + gift_cert);

    if (payment >= total) {
        $(".test").removeClass("test");
    } else if (payment < total) {
        $(".test").addClass("test");
    }

});

Answer 1

使用show和hide：http://jsfiddle.net/GFkSv/18/

$(':input').bind('keypress keydown keyup change',function(){

        var total = parseFloat($(':input[name="total"]').val(),10),
            cash = parseFloat($(':input[name="cash"]').val(),10),
            credit_card = parseFloat($(':input[name="credit_card"]').val(),10),
            gift_cert = parseFloat($(':input[name="gift_cert"]').val(),10),
            payment = (cash+credit_card+gift_cert);

        if(payment >= total){
            $('.test').show();
        }else if(payment<total){
            $('.test').hide();
        }       

});

修改

在页面加载后考虑预先填写的字段，只需触发keypress事件afetr DOM准备就绪：http://jsfiddle.net/GFkSv/30/

$(document).ready(function(){ $(':input').trigger('keypress'); });

Answer 2

$('input').on('keyup change', function(){
        var total = parseFloat($('input[name="total"]').val()),
            cash = parseFloat($('input[name="cash"]').val()),
            credit_card = parseFloat($('input[name="credit_card"]').val()),
            gift_cert = parseFloat($('input[name="gift_cert"]').val()),
            payment = (cash+credit_card+gift_cert);

        $(".test").toggle(payment >= total);
});

FIDDLE

parseFloat中不需要Radix，on()比bind()优先:input，input这些天应该只有{{1}}，只有这个名称应该足以让你真正选择，并且同时绑定到所有按键事件只是开销。

Answer 3

这是因为您删除了“.test”类。下次你再也无法查询$（“。test”）。尝试使用show / hide代替

Answer 4

或更改选择器： http://jsfiddle.net/GFkSv/21/

$(':input').bind('keypress keydown keyup change',function(){

        var total = parseFloat($(':input[name="total"]').val(),10),
            cash = parseFloat($(':input[name="cash"]').val(),10),
            credit_card = parseFloat($(':input[name="credit_card"]').val(),10),
            gift_cert = parseFloat($(':input[name="gift_cert"]').val(),10),
            payment = (cash+credit_card+gift_cert);

        if(payment >= total){
        $("input[name=submit]").removeClass("test");    
        }else if(payment<total){
        $("input[name=submit]").addClass("test");
        }       

});

Answer 5

其他方式是使用$ .each（）;

汇总所有内容

$(':input').bind('keypress keydown keyup change', function () {
    var total = parseFloat($(':input[name="total"]').val(), 10);
    var payment=0;
    $(':input[name="cash"],:input[name="credit_card"],:input[name="gift_cert"]').each(
        function() {
            payment+=parseFloat($(this).val(),10);            
        }
    )
    console.log(payment,total);
    if (payment >= total) {
        $(".test").hide();
    } else if (payment < total) {
        $(".test").show();
    }

});

jquery隐藏/显示基于输入字段总计的提交按钮

5 个答案: