javascript禁用按钮有条件

时间:2014-01-17 12:06:35

标签: javascript jquery

为什么我得到警报但是在从选择中更新总计后将负数更改为正数后按钮不启用。 以下是不起作用的部分:

    if ($('.grand_total').val() < 0) {
   $('#submit').prop('disabled', true);
   alert('negative number found');

} else if ($('.grand_total').val() > 0) {
   $('#submit').prop('disabled', false);
   alert('positive number found');
}  

这是完整的代码:

 <script language="javascript">
 $(".add_to_total").on('change', function() {
var total = 0;
var grand_total = 0; 
$(".dynamic_row").each(function() {
    var row = $(this);

    var start_hour_am = parseFloat(row.find(".start_hour_am").val()) || 0;
    var start_minute_am = parseFloat(row.find(".start_minute_am").val()) || 0;

    var end_hour_am = parseFloat(row.find(".end_hour_am").val()) || 0;
    var end_minute_am = parseFloat(row.find(".end_minute_am").val()) || 0;        

    var start_hour_pm = parseFloat(row.find(".start_hour_pm").val()) || 0;
    var start_minute_pm = parseFloat(row.find(".start_minute_pm").val()) || 0;          

    var end_hour_pm = parseFloat(row.find(".end_hour_pm").val()) || 0;
    var end_minute_pm = parseFloat(row.find(".end_minute_pm").val()) || 0;

    total = ( (Number(end_hour_am) + (Number(end_minute_am))) - (Number(start_hour_am) + Number(start_minute_am)) + (Number(end_hour_pm) + Number(end_minute_pm)) - (Number(start_hour_pm) + Number(start_minute_pm)));
    row.find(".total").val(total);
    grand_total = Number(grand_total) + Number(total);  

}); 
    $("#grand_total").val(grand_total);


if ($('.grand_total').val() < 0) {
   $('#submit').prop('disabled', true);
   alert('negative number found');

} else if ($('.grand_total').val() > 0) {
   $('#submit').prop('disabled', false);
   alert('positive number found');
}  

 });
 </script>

任何想法都会受到赞赏。

更新 这是总计的html:

<input type="text" class="grand_total" name="grand_total" id="grand_total" data-role="none" value="0" size="3" readonly="true">

这是我试图禁用的按钮:

<button type="submit" data-theme="e" data-mini="true" data-inline="true" name="submit" id="submit" class="submit" data-icon="check" value="submit-value">Submit</button>

根据Nick N的建议,按钮禁用/启用仍然会出现同样的问题。

<script language="javascript">
$(".add_to_total").on('change', function() {
    var total = 0;
    var grand_total = 0; 
    $(".dynamic_row").each(function() {
        var row = $(this);

        var start_hour_am = parseFloat(row.find(".start_hour_am").val()) || 0;
        var start_minute_am = parseFloat(row.find(".start_minute_am").val()) || 0;

        var end_hour_am = parseFloat(row.find(".end_hour_am").val()) || 0;
        var end_minute_am = parseFloat(row.find(".end_minute_am").val()) || 0;        

        var start_hour_pm = parseFloat(row.find(".start_hour_pm").val()) || 0;
        var start_minute_pm = parseFloat(row.find(".start_minute_pm").val()) || 0;          

        var end_hour_pm = parseFloat(row.find(".end_hour_pm").val()) || 0;
        var end_minute_pm = parseFloat(row.find(".end_minute_pm").val()) || 0;

        total = ( (Number(end_hour_am) + (Number(end_minute_am))) - (Number(start_hour_am) + Number(start_minute_am)) + (Number(end_hour_pm) + Number(end_minute_pm)) - (Number(start_hour_pm) + Number(start_minute_pm)));
        row.find(".total").val(total);
        grand_total = Number(grand_total) + Number(total);  

    }); 
        $("#grand_total").val(grand_total);


    //if (parseFloat($('.grand_total').val()) < 0) {
    //   $('#submit').prop('disabled', true);
    //   alert('negative number found');

    //} else if (parseFloat($('.grand_total').val()) > 0) {
    //   $('#submit').prop('disabled', false);
    //   alert('positive number found');
    //}


    var total = parseFloat($('#grand_total').val());
    if(total < 0){
       $('#submit').prop('disabled', true);
       alert('negative number found...');
    }
    else {
       $('#submit').prop('disabled', false);
       alert('positive number found...');
    }     

});
</script>

更新 好吧看起来问题是因为按钮是一个jquery移动生成按钮,当找到负值时它没有更新按钮的状态,如果我刷新整个表单按钮状态然后chnages。我通过将data-role设置为none来测试这一点,因此提交按钮变为标准表单按钮,并且禁用/启用功能起作用。 我有什么想法可以解决这个问题吗?

3 个答案:

答案 0 :(得分:1)

你正在通过$('.grand_total').val() 而不是$('#grand_total').val()

答案 1 :(得分:1)

这应该有效:

var total = parseFloat($('.grand_total').val());
if(total < 0){
   $('#submit').attr("disabled", "disabled");
   alert('negative number found');
}
else {
   $('#submit').removeAttr("disabled"); 
   alert('positive number found');
}

Jquery Mobile:不要刷新整个表单,只刷新按钮:

$('#submit').button('refresh');

请注意:我将'#'更改为'。'。根据您的HTML,您还可以更改此行:

 $(".grand_total").val(grand_total);

为:

$("#grand_total").val(grand_total);

答案 2 :(得分:0)

试试这个:

var total = parseInt($('.grand_total').val());
if(total < 0){}
else {}