使用 jquery 从值设置模式中的单选按钮

Question

我正在尝试使用数据属性值在 Modal 中设置单选按钮。如果我删除隐藏的模式代码，它工作正常。但是，我想要那个代码，因为我也用它来添加新学生（我没有在代码中提供），所以我在关闭时清除它。文本框工作正常，但单选按钮在选择一个学生然后选择另一个学生后停止工作。

例如，我编辑 John，它按预期工作。现在单击 John 后，我关闭并单击 Jane，单选按钮不起作用。有没有一种方法可以在关闭模式时清除控件的内容，但也可以在选择时重新获取值？

$(document).on('click', '.editStudent', function(e) {
  var row = $(this).closest('tr');
  var name = row.find('td.name').text().trim();
  var qualified = $(this).attr("data-qualified");
  if (name != null && name != "" && name != undefined) {
    $("#ModalName").val(name);
  }
  if (qualified != null && qualified != "" && qualified != undefined) {
    $("input[name='ModalQualified']").val([qualified.toLowerCase()])
  }
  $('#EditModal').modal('toggle');
})

$('#EditModal').on('hidden.bs.modal', function(e) {
  $(this)
    .find("input,textarea,select")
    .val('')
    .end()
    .find("input[type=checkbox], input[type=radio]")
    .prop("checked", false)
    .end();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />


<table id="tblStudent">
  <thead>
    <tr>
      <th style="display:none;">Id</th>
      <th>Name</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="display:none;"><input type="hidden" value="id1" /></td>
      <td class="name">John</td>
      <td><a title="Edit" class="btn btn-xs editStudent" data-qualified="false"> Edit</a></td>
    </tr>
    <tr>
      <td style="display:none;"><input type="hidden" value="id2" /></td>
      <td class="name">Jane</td>
      <td><a title="Edit" class="btn btn-xs editStudent" data-qualified="true"> Edit</a></td>
    </tr>
    <tr>
      <td style="display:none;"><input type="hidden" value="id3" /></td>
      <td class="name">Jim</td>
      <td><a title="Edit" class="btn btn-xs editStudent" data-qualified="false"> Edit</a></td>
    </tr>
  </tbody>
</table>



<div id="EditModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
        <h4 class="modal-title" id="myModalLabel">Edit Student</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-6 col-xs-12">
            <div class="form-group">
              <label>Student</label><br />
              <input type="text" id="ModalName" class="form-control medium" />
            </div>
          </div>

          <div class="col-sm-6 col-xs-12">
            <div class="form-group">
              <label for="Refrigeration">Qualified</label>
              <input type="radio" id="ModalQualified" name="ModalQualified" value="true" />Yes
              <input type="radio" id="ModalQualified" name="ModalQualified" value="false" style="margin-left: 15px;" />No<br />
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

radio 的 ID 必须不同，然后使用 prop of element:

if(qualified.toLowerCase() == 'true')

$('#ModalQualifiedY').prop('checked',true)

else

$('#ModalQualifiedN').prop('checked',true)