Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   disabled на динамически созданые элементы (https://javascript.ru/forum/dom-window/72110-disabled-na-dinamicheski-sozdanye-ehlementy.html)

maksqwerty 09.01.2018 16:45

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'); - решил брать класс, так как он у них общий.
Скрипт работает только для первого элемента, а для других, которые создаются при клике на кнопку - нет.
Что я делаю не так?

laimas 09.01.2018 16:51

Цитата:

Сообщение от maksqwerty
$state.on("change",function()

Это не делегирование, делегирование, это

$(кому делегируют).on("change", "кто делегирует", function()

рони 09.01.2018 16:54

Цитата:

Сообщение от maksqwerty
Я читал о делегации событий,

почему не использовали делегирование, если читали? форум полон примеров, можно и документацию прочесть

рони 09.01.2018 17:31

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

maksqwerty 16.01.2018 13:15

Спасибо, всё работает, но не так как нужно :(
Скрипт работает корректно с элементами, которые есть уже.
Но если, например, сначала выбрать в селлекте любое значение кроме "EZ" или "MUB2", то у полей ввода с классом "ind" будет аттрибут "disabled", а у динамически созданных элементов нет.
Как сделать так, что бы сперва можно было выбрать корректное значение в списке, и сразу после этого ставился аттрибут disabled на всех динамически созданных полях ввода с классом "ind"?:help:

рони 16.01.2018 13:39

maksqwerty,
добавьте строку, там где создаёте элементы в конец
$('#eart').trigger('change');

maksqwerty 16.01.2018 15:27

Сама динамическая таблица выглядит таким образом:
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;
}

И куда бы я не добавил эту строку, которую вы написали, она не работает :(

рони 16.01.2018 15:33

maksqwerty,
в 23 строку

maksqwerty 01.02.2018 18:06

В связи с некоторыми обстоятельствами вынужден снова поднять эту тему.
А можно делать "выборку" не по значению, а по классу?
Т.е. вместо
if ($state.val() == 'EZ') {

Написать, к примеру
if ($state.attr('class') == 'EZ') {

Так как в value я вынужден использовать совершенно другие значения.

j0hnik 01.02.2018 18:32

maksqwerty,
Можно! а можно создать data-val атрибут, как вам удобнее


Часовой пояс GMT +3, время: 00:24.