如何根据同一行中td元素的输入禁用一行按钮？

Question

I'm quite new to JQuery/Javascript and am trying to disable a button with class="settle-button" in certain rows that are placed in a dynamically generated table based on the value of a td-element with class="total" it.

I came up with the following code:

$(function () {
    $('table tr').each(function () {
        if ($(this).find('.total').val() == 0.00) {
            $(this).find('.settle-button').attr('disabled', 'disabled');
        }
        else {
            $(this).find('.settle-button').removeAttr('disabled');
        }
    });
});

Unfortunately, this code disables ALL buttons if only one happens to be 0.00. How can this code be made to change only the button in the current row? And are there other ways it can be improved?

(PS I am unable to reproduce the issue in this Fiddle )

Answer 1

your if statement reads wrong. .val() is used to get the value of a form element, input, select etc. use .html() to check to text in the TD.

Try this -

$(function () {
    $('table tr').each(function () {
        if ($(this).find('.total').html() == 0.00) {
            $(this).find('.settle-button').prop('disabled', true);
        }
        else {
            $(this).find('.settle-button').prop('disabled', false);
        }
    });
});

Here is the update fiddle

Good point made by Karl-Andre - use .prop .

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

.prop()