disabled на динамически созданые элементы
Есть таблица с динамическими полями.
При выборе в одном селекте (вне этой таблицы) двух вариантов - инпуты должны быть без атрибута disabled, при остальных - с ним. Эти инпуты - динамически созданные элементы таблицы при клике на кнопку. Я читал о делегации событий, но код все-равно не работает. Вот сам код: $(document).ready(function(){ var $state = $('#eart'), $province = $('.ind'); $state.on("change",function() { if ($state.val() == 'EZ') { $province.removeAttr('disabled'); }else if($state.val() == 'MUB2') { $province.removeAttr('disabled'); } else { $province.attr('disabled', 'disabled').val(''); } }).trigger('change'); }); $province = $('.ind'); - решил брать класс, так как он у них общий. Скрипт работает только для первого элемента, а для других, которые создаются при клике на кнопку - нет. Что я делаю не так? |
Цитата:
$(кому делегируют).on("change", "кто делегирует", function() |
Цитата:
|
:write: похоже не нужно тут делегирования
$(document).ready(function(){ var $state = $('#eart'); $state.on("change",function() { var $province = $('.ind'); if ($state.val() == 'EZ') { $province.removeAttr('disabled'); }else if($state.val() == 'MUB2') { $province.removeAttr('disabled'); } else { $province.attr('disabled', 'disabled').val(''); } }).trigger('change'); }); |
Спасибо, всё работает, но не так как нужно :(
Скрипт работает корректно с элементами, которые есть уже. Но если, например, сначала выбрать в селлекте любое значение кроме "EZ" или "MUB2", то у полей ввода с классом "ind" будет аттрибут "disabled", а у динамически созданных элементов нет. Как сделать так, что бы сперва можно было выбрать корректное значение в списке, и сразу после этого ставился аттрибут disabled на всех динамически созданных полях ввода с классом "ind"?:help: |
maksqwerty,
добавьте строку, там где создаёте элементы в конец $('#eart').trigger('change'); |
Сама динамическая таблица выглядит таким образом:
var table = document.getElementById('dynamictable'), tbody = table.getElementsByTagName('tbody')[0], clone = tbody.rows[0].cloneNode(true); function deleteRow(el) { var del = el.parentNode.parentNode.rowIndex; table.deleteRow(del); while (table.rows[0]){ updateRow(table.rows[del], del, false); del++; } } function insRow() { var new_row = updateRow(clone.cloneNode(true), ++tbody.rows.length, true); tbody.appendChild(new_row); } function updateRow(row, del) { row.cells[0].innerHTML = del; var inp1 = row.cells[1].getElementsByTagName('input')[0]; inp1.id = 'mat'+ del; var inp2 = row.cells[2].getElementsByTagName('input')[0]; inp2.id = 'ind'+ del; var inp3 = row.cells[3].getElementsByTagName('input')[0]; inp3.id = 'ben'+ del; var inp4 = row.cells[4].getElementsByTagName('input')[0]; inp4.id = 'men'+ del; var inp5 = row.cells[5].getElementsByTagName('input')[0]; inp5.id = 'preis'+ del; var inp6 = row.cells[6].getElementsByTagName('input')[0]; inp6.id = 'wert'+ del; var sel1 = row.cells[7].getElementsByTagName('select')[0]; sel1.id ='ferti'+ del; sel1.value = document.getElementById('ferti1').value; var inp7 = row.cells[8].getElementsByTagName('input')[0]; inp7.id = 'sap'+ del; var sel2 =row.cells[9].getElementsByTagName('select')[0]; sel2.id ='kost'+ del; sel2.value = document.getElementById('kost1').value; var but1 = row.cells[10].getElementsByTagName('button')[0]; but1.id = 'deletebutton'+del; return row; } И куда бы я не добавил эту строку, которую вы написали, она не работает :( |
maksqwerty,
в 23 строку |
В связи с некоторыми обстоятельствами вынужден снова поднять эту тему.
А можно делать "выборку" не по значению, а по классу? Т.е. вместо if ($state.val() == 'EZ') { Написать, к примеру if ($state.attr('class') == 'EZ') { Так как в value я вынужден использовать совершенно другие значения. |
maksqwerty,
Можно! а можно создать data-val атрибут, как вам удобнее |
Часовой пояс GMT +3, время: 00:24. |