javascript - jquery/javascript 禁用表格单元格中的按钮

Question

我有一个带有 2 个按钮的表格单元格。

<td align="left" >
 <input type="button" value="edit"/>
<input  type="button" value="save" disabled="disabled"/>
</td>

默认情况下，保存按钮被禁用。单击编辑按钮时，必须启用保存按钮按钮。问题是我无法为按钮分配 id，因为该表是使用 struts2 s:iterator 标记动态生成的。如果我这样做，将有 2 个或更多具有相同 ID 的单元格

我怎样才能做到这一点？

Answer 1

您需要绑定click()事件editButton并使用attr()设置disabledsaveButton属性。将您的代码放在$(document).ready()中是安全的，这样 DOM 元素在您使用之前就准备好了。

你可以这样做，

现场演示

$(document).ready(function(){

    $('#editButton').click(function(){
          $('#saveButton').attr('disabled', false);
    });
});

Answer 2

如果你想通过身份证去

$('#editButton').on('click', function(){
   $('#saveButton').prop('disabled', false);
});

如果您在多个 td 中有这种结构，您可以编写一个通用事件，其中只会启用与编辑按钮相对应的按钮..

对于没有 ID 的重复结构

$(':button[value="edit"]').on('click', function(){
       var $td = $(this).closest('td');
    $td.find($(':button[value="save"]')).prop('disabled', false);
});​

HTML

<tr>
      <td align="left">
         <input type="button" value="edit" />
         <input type="button" value="save" disabled="disabled" />
      </td>
   </tr>
     <tr>
      <td align="left">
         <input type="button" value="edit" />
         <input type="button" value="save" disabled="disabled" />
      </td>
   </tr>
     <tr>
      <td align="left">
         <input type="button" value="edit" />
         <input type="button" value="save" disabled="disabled" />
      </td>
   </tr>

检查小提琴

Answer 3

每个按钮都不需要ids 。您所需要的只是事件委托id，整个表格的单个和class按钮的 es。

1. 分配id给表格和classes 给按钮，例如

   <table id="dataTable" ...>
     ...
     <td style="text-align:left;">
       <input type="button" class="edit" value="edit" />
       <input type="button" class="save" value="save" disabled="disabled" />
     </td>
     ...
   </table>
   

2. 将单个事件观察者附加到表（当然在加载页面时）

   $("#dataTable tbody").on("click", ".edit", function(event) {
     $(this).next(".save").prop("disabled", false);
   });
   

   当用户单击带有class="edit"的表格内部的任何按钮时，它会激活id="dataTable"，然后在单击的按钮之后找到下一个按钮class="save"，并启用找到的按钮。

Answer 4

你可以使用jquery

$('#editButton').click(function(){$("#saveButton").attr('disabled',false)});

在 JavaScript 中

document.getElementById('saveButton').setAttribute('disabled',false);