javascript - 如何通过 mysql 数据选中/取消选中模式中的单选按钮？

Question

这就是我将数据从按钮发送到 MODAL 的方式。这非常有效。

echo "<td><button type='button' class='btn btn-danger' data-toggle='modal' data-target='#MORMODALTRANSFER' data-id='".$row['MORID']."'>More on this... </button></td>";

这就是我将数据绑定(bind)到 MODAL 的方式，效果很好。

$('#myMODAL').on('show.bs.modal', function (event) {

var button = $(event.relatedTarget) // Button that triggered the modal
var ID = button.data('id') 
modal.find('.modal-body #IDq').val(ID)

这是我试图检查的模态上的单选按钮

<div class="form-group">
                                <label>
                                  <input type="radio" name="r2"class="minimal-red" value="noncomp">A
                                </label>
                                <label>
                                  <input type="radio" name="r2" class="minimal-red"value="comp">B
                                </label>
                                <label>
                                  <input type="radio" name="r3"class="minimal-red"value="nonconf">
                                  C
                                </label>
                                <label>
                                <input type="radio" name="r3"class="minimal-red"value="conf">
                                 D
                                </label>                                    
                              </div>

在处理文本字段时，我完全了解在 MODAL 上绑定(bind)和使用数据，但是，我的问题是，如何将数据绑定(bind)到一组单选按钮？

Answer 1

检查下面的代码可能会对您有所帮助。如果需要任何进一步的解释，请评论。

$('#myMODAL').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  $('input[name="optradio"]:checked').prop('checked', false); //I'm doing this coz every time new popup opens redio button will be reset to none. If you don't need to do this remove this line
  var ID = button.data('id');
  $('input[name="optradio"][value="'+ID+'"]').prop('checked',true);
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-sm btn-info btn-lg" data-toggle="modal" data-target="#myMODAL">Open Modal - Check None</button>
<button type="button" class="btn btn-sm btn-info btn-lg" data-toggle="modal" data-target="#myMODAL" data-id="10">Open Modal - Check 10</button>
<button type="button" class="btn btn-sm btn-info btn-lg" data-toggle="modal" data-target="#myMODAL" data-id="11">Open Modal - Check 11</button>
<button type="button" class="btn btn-sm btn-info btn-lg" data-toggle="modal" data-target="#myMODAL" data-id="12">Open Modal - Check 12</button>
<button type="button" class="btn btn-sm btn-info btn-lg" data-toggle="modal" data-target="#myMODAL" data-id="13">Open Modal - Check 13</button>
<button type="button" class="btn btn-sm btn-info btn-lg" data-toggle="modal" data-target="#myMODAL" data-id="14">Open Modal - Check 14</button>
<button type="button" class="btn btn-sm btn-info btn-lg" data-toggle="modal" data-target="#myMODAL" data-id="15">Open Modal - Check 15</button>
<!-- Modal -->
<div id="myMODAL" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="radio">
          <label><input type="radio" name="optradio" value="10">10</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio" value="11">11</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio" value="12">12</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio" value="13">13</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio" value="14">14</label>
        </div>
        <div class="radio">
          <label><input type="radio" name="optradio" value="15">15</label>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>