如何隐藏或显示按钮取决于可单击的收音机

Question

我刚刚创建了4个按钮（添加，编辑，删除，取消）和一个包含来自ajax的数据的表。

每行包含一个收音机（名称：myRadio）。

单击单选按钮时，按钮应根据数据字段（名称：状态）的值更改其状态（隐藏或显示）。 需要您的帮助。

 $(document).ready(function() { $('data-field:idxRadio[name=myRadio]').change(function(row, value, index) { if (row.status === 'working') { $("#addBtn").show(); $("#delBtn").hide(); } else if (row.status === 'finished') { $("#delBtn").show(); $("#addBtn").hide(); } else {} }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card-body"> <div id="toolbar"> <button type="button" id="addBtn" class="btn btn-sm btn-success" onclick="add()">Add</button> <button type="button" id="editBtn" class="btn btn-sm btn-primary" onclick="edit()">Edit</button> <button type="button" id="delBtn" class="btn btn-sm btn-secondary" onclick="del()">Delete</button> <button type="button" id="canBtn" class="btn btn-sm btn-secondary" onclick="buttonSelection()">Cancel</button> </div> <table id="table"> <tr> <th data-field="idxRadio" name="myRadio" data-valign="middle" data-align="center" data-radio="true"></th> <th data-field="id" data-align="center" data-valign="middle" data-sortable="true" data-cell-style="cellStyle">No</th> <th data-field="keyPriority" data-align="center" data-valign="middle" data-sortable="true" data-formatter="linkFormat" data-cell-style="cellStyle">priority</th> <th data-field="endTime" data-align="center" data-valign="middle" data-sortable="true" data-formatter="timeFormat" data-cell-style="cellStyle">time</th> <th data-field="title" data-align="center" data-valign="middle" data-sortable="true" data-cell-style="cellStyle">title</th> <th data-field="status" data-align="center" data-valign="middle" data-sortable="true" data-cell-style="cellStyle">status</th> </tr> </thead> </table> </div> 

Answer 1

一个从ajax接收数据的表。

然后，由于行是动态添加到DOM的，因此需要使用事件委托on() ，然后在使用.closest()单击单选按钮时需要获取父行tr ，然后从最后一列获取状态（尝试给它一个类似于status的类以简化查找选择器）：

$(document).ready(function() {

  $('#table tbody').on('change', ':radio', function(value, index) {
    var row = $(this).closest('tr');
    var status = row.find('.status').text().trim();

    switch (status) {
      case 'working':
        $("#addBtn").show();
        $("#delBtn").hide();
        break;
      case 'finished':
        $("#delBtn").show();
        $("#addBtn").hide();
        break;
      default:
        $('#toolbar button').show()
    }
  });

});

Answer 2

这是我的工作代码。

$(document).ready( function() {
    $('#table tbody').on('change', ':radio', function(value, index) {

    var obj = $('#table').bootstrapTable('getSelections')[0];
    var status = obj.status;
    switch (status) {
        case 'wait':
            $("#addBtn").show();

            $("#delBtn").show();
            break;

        default:
        $('#addBtn').show()
    }

    });
});