title: Click button to set radio button clicked on modal bootstrap based on value
body: <p>I have "lihat detail" button when user click it will preview a Bootstrap Modal to show detail data. </p>
  
  <p>I want when "Jenis Kelamin" value is "Laki-Laki" then user click "lihat detail" modal show radio button "laki-laki" is selected.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group"&gt;
    &lt;label&gt;Jenis Kelamin&lt;/label&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-6 col-xs-6"&gt;
          &lt;input type="radio" id="male" name="gender" class="minimal" disabled&gt;
          &lt;label for="male"&gt;&lt;i class="fa fa-mars"&gt;&lt;/i&gt; Laki-laki&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-md-6 col-xs-6"&gt;
          &lt;input type="radio" id="female" name="gender" class="minimal" disabled&gt;
          &lt;label for="female"&gt;&lt;i class="fa fa-venus"&gt;&lt;/i&gt; Perempuan&lt;/label&gt;     
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Edit Button</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="btn btn-primary btn-xs" id="lihat_detail_guru" data-toggle="modal" data-target="#modal_detail_guru" data-backdrop="static" data-nik="&lt;?php echo $nik ?&gt;" data-nama="&lt;?php echo $nama ?&gt;" data-gender="&lt;?php echo $jenis_kelamin ?&gt;" data-tempat_lahir="&lt;?php echo $tempat_lahir ?&gt;" data-tanggal_lahir="&lt;?php echo $tanggal_lahir ?&gt;" data-agama="&lt;?php echo $agama ?&gt;" data-alamat="&lt;?php echo $alamat ?&gt;" data-no_telp="&lt;?php echo $no_telp ?&gt;" data-email="&lt;?php echo $email ?&gt;" data-foto_guru="&lt;?php echo $foto_guru ?&gt;"&gt;
  
    &lt;i class="fa fa-eye"&gt;&lt;/i&gt; Lihat Detail
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Jquery</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$(document).on("click", "#lihat_detail_guru", function(){
      var nik = $(this).data('nik');
      var nama = $(this).data('nama');
      var gender = $(this).data('gender');
      var tempat_lahir = $(this).data('tempat_lahir');
      var tanggal_lahir = $(this).data('tanggal_lahir');
      var agama = $(this).data('agama');
      var alamat = $(this).data('alamat');
      var no_telp = $(this).data('no_telp');
      var email = $(this).data('email');
      var foto_guru = $(this).data('foto_guru');
      $("#modal_lihat_detail_guru #nik").val(nik);
      $("#modal_lihat_detail_guru #nama").val(nama);
      $("#modal_lihat_detail_guru #gender").val(gender);
  
      if (gender == 'laki-laki')
      {
         alert("Test");
      &lt;!-- //    $('#male').attr('checked', 'checked') --&gt;
         $('#male').prop('checked', true)
      }
      else
      {
      &lt;!-- //    $('#female').attr('checked', 'checked') --&gt;
         $('#female').prop('checked', true)
      }
  
  
      $("#modal_lihat_detail_guru #tempat_lahir").val(tempat_lahir);
      $("#modal_lihat_detail_guru #tanggal_lahir").val(tanggal_lahir);
      $("#modal_lihat_detail_guru #agama").val(agama);
      $("#modal_lihat_detail_guru #alamat").val(alamat);
      $("#modal_lihat_detail_guru #no_telp").val(no_telp);
      $("#modal_lihat_detail_guru #email").val(email);
      $("#modal_lihat_detail_guru #foto_guru").attr("src", "guru_upload/"+foto_guru);
  
    })</code></pre>
  </div>
  </div>
  </p>
  
  <p>Below is the preview when user click on "<strong>lihat detail</strong>"</p>
  
  <p><a href="https://i.stack.imgur.com/eCFFG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eCFFG.png" alt="enter image description here"></a></p>
  
  <p>it will show as screen below</p>
  
  <p><a href="https://i.stack.imgur.com/QAfao.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QAfao.png" alt="enter image description here"></a></p>
  
  <p>when modal is shown, radio button "laki-laki" should be selected, but using <code>$("#male").prop("checked", true);</code> doesn't make parse selected to bootstrap modal</p>
  
  <p>What did I miss? Please help to fix this. thank you </p>