Как скрыть или показать кнопки зависит от кликабельного радио

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

Это мои сработавшие коды.

$(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()
    }

    });
});

Answer 2

таблица с полученными данными из ajax.

Затем вам нужно использовать делегирование события on(), так как строки динамически добавляются в DOM, затем вам нужно получить родительскую строку tr, когда вы нажимаете переключатель с помощью .closest() и затем получаете статус из последнего столбца (попробуйте дать ему класс наподобие 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()
    }
  });

});