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>"; 

これは、私は完璧に動作し、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上のデータを結合して使用しての完全に承知しているが、私の質問は、どのようにラジオボタンのセットにデータをバインドするには？

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>