更新

Question

我正在创建一个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'});
            }
});

对于我做错的任何建议都会非常感激。感谢。

Answer 1

该选项中没有值。

试试这个..

    <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>

并且不能为不同的元素提供相同的ID

Answer 2

不要在你的情况下使用ID选择器，因为ID是UNIQUE，而页面中的javascript只能出现一次。

（不建议任何时候使用duplicity id，使用类或其他选择器而不是id）

<强> 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

使用Jquery在多个表行中启用/禁用表单字段

2 个答案:

更新