Question

我有一个表格，其中每行都有一个保存按钮。默认情况下，我保持禁用所有保存按钮。我想要做的是，如果有任何变化，只启用连续保存按钮select标签内的值。

我的桌子是

<tr>
   <td id = "tst">${userId}</td>
   <td>${applicationId}</td>
   <td>${.firstName}</td>
   <td>${username}</td>
   <td class ="st" >
   <select id="roles" >
      <option value='Consumer'>Consumer</option>
      <option value='Contributor'>Contributor</option>
      <option value='Collaborator'>Collaborator</option>
      <option value='Coordinator'>Coordinator</option>
      <option value='Administrator'>Administrator</option>
    </select></td>
    <td style="width:90px">
    <div id = "usr_role" >
      <button  id = "${userId}" type="button" class="btn btn-xs btn-primary"  disabled >Save</button>
    </div>
    </td>

</tr>

我尝试使用以下函数检查是否更改了选择值：

 $("select").on('change' , function()
            {
             $('button ').prop('disabled', false);
                alert('select changed');
            });

这似乎不起作用......任何人都可以提出更好的方法

Answer 1

您需要找到选择的tr，然后找到其中的按钮

$("select").one('change', function () {
    $(this).closest('tr').find('button').prop('disabled', false);
});

如果您有动态添加的行

$(document).on('change', 'select', function () {
    $(this).closest('tr').find('button').prop('disabled', false);
});

Answer 2

这样做，在表格中存在的每个选择框上应用更改事件。然后在closest()的帮助下在选择框的基础上找到行，并更改同一行上存在的按钮属性。

$('table tr').on('change', 'select', function() {
    var _parent = $(this).closest('tr');

    $('button', _parent).prop('disabled', false);
    alert('done');
});

Answer 3

＆＃13;

 $("select").on('change' , function()
            {
             $('.btn-primary').each(function(){
                          $(this).prop('disabled', true);           
                                    });
             var id=$(this).attr('title');
             $('button#id'+id).prop('disabled', false);
                alert('select changed');
            });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<tr>
   <td id = "tst">${userId}</td>
   <td>${applicationId}</td>
   <td>${.firstName}</td>
   <td>${username}</td>
   <td class ="st" >
   <select id="roles" title="1">
      <option value='Consumer'>Consumer</option>
      <option value='Contributor'>Contributor</option>
      <option value='Collaborator'>Collaborator</option>
      <option value='Coordinator'>Coordinator</option>
      <option value='Administrator'>Administrator</option>
    </select></td>
    <td style="width:90px">
    <div id = "usr_role" >
      <button  id = "id1" type="button" class="btn btn-xs btn-primary"  disabled >Save</button>
    </div>
    </td>

</tr>
<tr>
   <td id = "tst">${userId}</td>
   <td>${applicationId}</td>
   <td>${.firstName}</td>
   <td>${username}</td>
   <td class ="st" >
   <select id="roles" title="2">
      <option value='Consumer'>Consumer</option>
      <option value='Contributor'>Contributor</option>
      <option value='Collaborator'>Collaborator</option>
      <option value='Coordinator'>Coordinator</option>
      <option value='Administrator'>Administrator</option>
    </select></td>
    <td style="width:90px">
    <div id = "usr_role" >
      <button  id = "id2" type="button" class="btn btn-xs btn-primary"  disabled >Save</button>
    </div>
    </td>

</tr>

＆＃13;

请尝试这可能对您有所帮助

如果更改了选择标记内的选项值，如何启用按钮

3 个答案: