2

我有一个包含大约 4 个输入字段的表单，即：cash、、和。如果三个字段（ ）的总和不等于输入字段（ ） ，我想隐藏提交按钮。我想我快到了，但我的问题在于当我尝试减少总和时，它不起作用。credit_cardgift_certtotalcash, credit_card, gift_certtotaladdClass

这是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");
    }

});
4

5 回答 5

4

使用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 DOMis ready：http: //jsfiddle.net/GFkSv/30/

$(document).ready(function(){
    $(':input').trigger('keypress');
});
于 2013-01-18T15:12:48.690 回答
1 
$('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);
});

小提琴

Radix 在 parseFloat 中不需要，on()优先于bind()，:input应该只是input这些天，只有名称才能真正满足您的选择器，并且同时绑定到所有按键事件只是开销。

于 2013-01-18T15:15:37.973 回答
1

这是因为您删除了“.test”类。下次您不能再次查询 $(".test") 。尝试改用显示/隐藏

于 2013-01-18T15:15:56.667 回答
0

或更改选择器：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");
        }       

});
于 2013-01-18T15:15:21.793 回答
0

另一种方法是使用 $.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();
    }

});
于 2013-01-18T15:22:10.577 回答