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 атрибут, как вам удобнее |
Цитата:
Я никогда так раньше не делал, поэтому не знаю :agree: А что за data-val? Как с ним работать? |
$('.some_class').css('color','red');//Выборка по классу
$('[data-value="some-value"]').css('color','red');//Выборка по data-атрибуту
|
Цитата:
$state.('[data-value="EZ"]')
|
maksqwerty, нет, нельзя.
Что вы пытаетесь сделать - загадка. Если нужно найти дочерние элементы у $state, удовлетворяющие селектору, то:
$state.find('[data-value="EZ"]');
|
Цитата:
Данные в этот список берутся с бд, т.е. у меня изначально так: echo "<option class=".$row["matype"]." value= ".$row["matype"].">".$row["matype"]." - ".$row["group"]."</option> Но потом я понял, что в бд обратно мне не нужно передавать ".$row["matype"].", а нужно передать ".$row["example"]." В конечном результате это выглядит так: echo "<option class=".$row["matype"]." value= ".$row["example"].">".$row["matype"]." - ".$row["group"]."</option> $state.val я уже не могу использовать, так как value = не нужные значение для этого скрипта, и придётся использовать class вместо value. |
"<option value= ".$row["example"]." data-val=".$row["matype"].">".$row["matype"]." - ".$row["group"]."</option>";
if($state.data('val')=='EZ')
//do something
|
не работает
$province.attr('disabled', 'disabled').val('');
а тут как быть? |
maksqwerty,
Цитата:
|
всё-ровно не роботает :(
|
maksqwerty, приведите пример HTML-кода имеющего отношение к проблеме и js, который вы пытаетесь использовать.
Гадать отчего и почему у вас ничего не получается можно долго. |
Цитата:
|
Цитата:
<select name="eart" id="eart" >
<option value="" selected="">test</option>
<?php
$sql = "SELECT * FROM type";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option class=".$row["matype"]." data-val = ".$row["matype"]." value= ".$row["example"].">".$row["matype"]." - ".$row["group"]."</option>";
} }
?>
</select>
<!--тут пойдёт динамическая таблица, код которой я выкладывал на первой странице этого треда-->
<table>
<th></th>
<th></th>
<th>Ind</th>
<td></td>
<td></td>
<td style="width: 3%"><label>
<input id="ind" type="text" name="ind[]" class="ind" maxlength="3"></label></td>
</table>
$(document).ready(function(){
var $state = $('#eart');
$state.on("change", function(){
var $province = $('.ind');
if ($state.data('val') == 'EZ') {
$province.removeAttr('disabled');
}else if ($state.data('val') == 'MUB2') {
$province.removeAttr('disabled');
} else {
$province.prop('disabled', 'disabled').val('');
}
}).trigger('change');
});
|
Вроде по-русски написал HTML-код, "html" даже выделил...
$(document).ready(function() {
$('#eart').on("change", function() {
var value = $(this).find('option:selected').data('val'),
condition = (['EZ', 'MUB2'].indexOf(value) > -1);
$('.ind').prop('disabled', !condition).val(function() {
return condition ? this.value : '';
});
}).trigger('change');
});
|
Спасибо большое, заработало!
Цитата:
Цитата:
|
maksqwerty, смысла публиковать php не было никакого, я об этом писал.
|
Понял, почему-то подумал, что для полноты картины скрипт вставить нужно (что бы в случае чего, не возникало вопросов "а зачем" "а почему")
|
| Часовой пояс GMT +3, время: 09:25. |