Как отключить кнопку одной строки на основе ввода в td-элемент в той же строке?

Question

Как отключить кнопку одной строки на основе ввода в td-элемент в той же строке?

0

Я новичок в JQuery/Javascript и пытаюсь отключить кнопку с помощью class="settle-button" в некоторых строках, которые помещаются в динамически сгенерированную таблицу на основе значения td-элемента с class="total" Это.

Я придумал следующий код:

$(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');
        }
    });
});

К сожалению, этот код отключает ВСЕ кнопки, если только один из них составляет 0,00. Как этот код можно изменить, чтобы изменить только кнопку в текущей строке? И есть ли другие способы его улучшения?

(PS Я не могу воспроизвести проблему в этом скрипте)

Erwin Rooijakkers 29 нояб. 2013, в 16:48

Источник

1

Используйте .prop вместо .attr : $(this).find('.settle-button').prop('disabled', true);
Karl-André Gagnon 29 нояб. 2013, в 15:04
0

Спасибо, это хороший совет! Другие советы очень приветствуются, так как я хочу изучать хорошие практики.
Erwin Rooijakkers 29 нояб. 2013, в 15:10
0

У меня есть один для себя: остальная часть не нужна. Упс.
Erwin Rooijakkers 29 нояб. 2013, в 15:11

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Используйте .prop вместо .attr : $(this).find('.settle-button').prop('disabled', true);
Спасибо, это хороший совет! Другие советы очень приветствуются, так как я хочу изучать хорошие практики.
У меня есть один для себя: остальная часть не нужна. Упс.

Mark Walters · Accepted Answer · 2013-11-29T13-16-00.000Z

1

Лучший ответ

ваше утверждение if неверно. .val() используется для получения значения элемента формы, ввода, выбора и т.д. использовать .html() для проверки на текст в TD.

Попробуй это -

$(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);
        }
    });
});

Вот скрипта обновления

Хороший момент, сделанный Карлом-Андреем - используйте .prop.

Начиная с jQuery 1.6, метод.attr() возвращает undefined для атрибутов, которые не были установлены. Чтобы получить и изменить свойства DOM, такие как проверенные, выбранные или отключенные состояния элементов формы, используйте метод.prop().

.prop()

Mark Walters 29 нояб. 2013, в 13:16

0

Сначала он работал в Fiddle, но не работал в моем реальном веб-приложении. Я узнал, что это потому, что я поместил значение в элемент <span>. При предоставлении span-элементов класса итогов, проблема была решена. Большое спасибо!
Erwin Rooijakkers 29 нояб. 2013, в 15:07
0

Скорее всего, они генерируются при загрузке страницы или в определенный момент (событие)?
Mark Walters 29 нояб. 2013, в 15:10
0

Они генерируются при загрузке страницы.
Erwin Rooijakkers 29 нояб. 2013, в 15:12
0

Вы можете попытаться обернуть свой код в $(window).load(function(){ //Function stuff here }); что должно обеспечить функционирование после загрузки страницы и всего содержимого?
Mark Walters 29 нояб. 2013, в 15:16
0

Другая вещь, которую вам, возможно, понадобится попробовать, - посмотреть, какое значение содержится в самом TD после загрузки контента. написать некоторый код для alert () html каждого поля '.total', чтобы увидеть, что там
Mark Walters 29 нояб. 2013, в 15:26
0

Ну, $(function () { - это сокращение от $( document ).ready(function() { поэтому он гарантированно загружается после завершения страницы. Я совершенно уверен, что он будет работать так, как и должно быть, на следующей неделе Я буду (научиться) писать модульные тесты, чтобы быть более уверенным.
Erwin Rooijakkers 29 нояб. 2013, в 15:32
1

Ваш код может быть сокращен следующим образом: $(this).find('.settle-button').prop('disabled', $(this).find('.total').html() == 0.00); , Но это может быть слишком «продвинутым» для ОП.
Karl-André Gagnon 29 нояб. 2013, в 16:04
0

Я согласен @ Karl-AndréGagnon, я думаю, что это будет слишком много улучшений :)
Mark Walters 29 нояб. 2013, в 16:09
0

@ Карл-Андре Ганьон: Очень мило. Можете ли вы объяснить, как это работает? Чего я не понимаю, так это того, что вы даете два аргумента оператору .prop где один является свойством «disabled», а другой - логическим значением, которое относится к элементу total. Почему это разрешено и что оно делает?
Erwin Rooijakkers 29 нояб. 2013, в 20:50
1

@ user2609980 делает $(this).find('.total').html() == 0.00 возвращает true или false. например, если вы делаете var test = $(this).find('.total').html() == 0.00; console.log(test) //==>true or false . Поскольку .prop использует логическое значение в качестве параметра, вы можете проверить свои условия непосредственно в параметрах.
Karl-André Gagnon 29 нояб. 2013, в 21:20

Показать ещё 8 комментариев