Включение/отключение полей формы в нескольких строках таблицы с помощью Jquery

Я создаю таблицу из 50 строк, и в каждой строке я хочу, чтобы одно поле формы было включено/отключено на основе значения параметра раскрывающегося списка в той же таблице.

Вот пример того, что у меня есть:

<tr id="tr1">
<td>
    <select id="tableDropDown" style="min-width: 100px;">
        <option>The Manufacturer</option>
        <option>Me</option>
    </select>
</td>
<td><input id="packSize" type="number" disabled></input></td>
</tr>

<tr id="tr2">
<td>
    <select id="tableDropDown" style="min-width: 100px;">
        <option>The Manufacturer</option>
        <option>Me</option>
    </select>
</td>
<td><input id="packSize" type="number" disabled></input></td>
</tr>

Функция jquery, которую я пытаюсь использовать для этого, отлично работает в первой строке, но ничего не меняет в других строках. Поле ввода "packSize" остается отключенным.

Вот как это выглядит:

$("#tableDropDown").on('change', function(){
            if ($(this).val() === "Me") {
                $("#packSize").removeAttr('disabled');
            }

            else {
                $("#packSize").attr({'disabled': 'disabled'});
            }
});

Любые советы о том, что я делаю неправильно, будут высоко оценены. Спасибо.


html jquery dom
person Jonathan Bechtel    schedule 29.03.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Опция не имеет значений.

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

    <tr id="tr1">
<td><select id="tableDropDown" style="min-width: 100px;"><option value="other">The Manufacturer</option><option value="Me">Me</option></select></td>
<td><input id="packSize" type="number" disabled></input></td>
</tr>
<tr id="tr2">
<td><select id="tableDropDown" style="min-width: 100px;"><option value="other">The Manufacturer</option><option value="Me">Me</option></select></td>
<td><input id="packSize" type="number" disabled></input></td>
</tr>

И не может иметь одинаковые идентификаторы для разных элементов

person aswin    schedule 29.03.2015
comment
Я только что внес предложенное вами изменение, и теперь оно не работает ни для одной строки. Есть ли какие-то изменения, которые мне нужно внести в мою функцию, чтобы она работала? Кроме того, наличие разных идентификаторов для каждого элемента кажется громоздким. Есть ли способ построить функцию, чтобы избежать этого? - person Jonathan Bechtel; 30.03.2015
comment
если у вас нет других полей выбора, используйте это $(select).on('change', function(){ if ($(this).val() === "Me") { $("#packSize").removeAttr('disabled'); } else { $("#packSize").attr({'disabled': 'disabled'}); } }); - person aswin; 30.03.2015

arrow_upward
0
arrow_downward

Не используйте селектор идентификаторов в вашем случае, потому что идентификатор является УНИКАЛЬНЫМ, а для javascript на странице может быть только ОДНО вхождение.

(не рекомендуется дублировать идентификаторы в любое время, используйте класс или другой селектор, а не идентификатор)

html

<table id="table">
<tr id="tr1">
<td>
    <select style="min-width: 100px;">
        <option>Me</option>
        <option>Manufacturer</option>
    </select>
</td>
<td><input type="number"></input></td>
</tr>

<tr id="tr2">
<td>
    <select style="min-width: 100px;">
        <option>Me</option>
        <option>Manufacturer</option>
    </select>
</td>
<td><input type="number"></input></td>
</tr>
</table>

JS

$("#table").on('change', 'select', function(){
//    if($(this).val() == 'Manufacturer') { // by specific value or text
      if($(this)[0].selectedIndex != '0') { // by known index in option
        var el = $(this).closest('tr').find('td input'); // get input
            el.val(''); // reset value
            el.attr({'disabled': 'disabled'}); // set property
    }
    else {
        $(this).closest('tr').find('td input').removeAttr('disabled'); // remove property
    }
});

рабочий пример jsfiddle


ОБНОВИТЬ

в чем проблема? Измените условие if только на то, что вам нужно. Я обновил html и скрипт выше.

if($(this).val() == 'Manufacturer') { // by specific value or text
if($(this)[0].selectedIndex != '0') { // by known index in option

обновленный рабочий пример jsfiddle

person daremachine    schedule 30.03.2015
comment
Глядя на jsfiddle, он всегда включается при выборе опции. Я хочу, чтобы он отключался только в том случае, если выбран производитель, но не в том случае, если выбран я. - person Jonathan Bechtel; 30.03.2015