单击按钮以基于值设置在模式引导程序上单击的单选按钮

Question

当用户单击该按钮时，我将显示“详细信息”按钮，它将预览Bootstrap Modal以显示详细数据。

我希望当“ Jenis Kelamin”的值为“ Laki-Laki”时，用户单击“ lihat detail”模式显示单选按钮“ laki-laki”。

<div class="form-group">
  <label>Jenis Kelamin</label>
  <div class="form-group">
    <div class="row">
      <div class="col-md-6 col-xs-6">
        <input type="radio" id="male" name="gender" class="minimal" disabled>
        <label for="male"><i class="fa fa-mars"></i> Laki-laki</label>
      </div>
      <div class="col-md-6 col-xs-6">
        <input type="radio" id="female" name="gender" class="minimal" disabled>
        <label for="female"><i class="fa fa-venus"></i> Perempuan</label>     
      </div>
    </div>
  </div>
</div>

编辑按钮

<a class="btn btn-primary btn-xs" id="lihat_detail_guru" data-toggle="modal" data-target="#modal_detail_guru" data-backdrop="static" data-nik="<?php echo $nik ?>" data-nama="<?php echo $nama ?>" data-gender="<?php echo $jenis_kelamin ?>" data-tempat_lahir="<?php echo $tempat_lahir ?>" data-tanggal_lahir="<?php echo $tanggal_lahir ?>" data-agama="<?php echo $agama ?>" data-alamat="<?php echo $alamat ?>" data-no_telp="<?php echo $no_telp ?>" data-email="<?php echo $email ?>" data-foto_guru="<?php echo $foto_guru ?>">

  <i class="fa fa-eye"></i> Lihat Detail
</a>

jQuery

$(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");
    <!-- //    $('#male').attr('checked', 'checked') -->
       $('#male').prop('checked', true)
    }
    else
    {
    <!-- //    $('#female').attr('checked', 'checked') -->
       $('#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);

  })

下面是用户单击“ lihat详细信息”

时的预览

它将显示在下面的屏幕上

显示模态时，应选择单选按钮“ laki-laki”，但是使用$("#male").prop("checked", true);不会选择解析来引导模态

我想念什么？请帮助解决此问题。谢谢

Answer 1

尝试一下

$("#male").attr('checked', 'checked');

Answer 2

$("#male").prop("checked", true); 

上面的代码已经正确，我发现它在Bootstrap Modal中不起作用，因为class="minimal"之后我删除了该类并解决了问题。

<input type="radio" id="male" name="gender" class="minimal" disabled>
        <label for="male"><i class="fa fa-mars"></i> Laki-laki</label>