首页 文章

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

提问于
浏览 次
0

我正在创建一个50行表，并且在每行中我希望根据同一个tablerow中下拉框的选项值启用/禁用一个表单字段 .

这是我的一个例子：

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

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

jquery html dom

2 回答

  • 0

    该选项中没有值 .

    试试这个..

    <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

    回复于
  • 0

    不要在你的情况下使用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

    回复于

相关问题