CODEWITHSUNDEEP
javascripthtml
Kelpie
Kelpie

Reputation: 365

disable div using radio button

i want to disable my some of my div using radio button, the radio button should be disable and enable the div accoring to the radion button. i want it still showing but you can't make any input or change to the inputbox

here is the code of the div

<div class="form-group">
  <label for="name" class="col-sm-2 text-left"> Apakah Penerima KPS / PKH
  </label>
  <div class="col-sm-10 radio text-left">
      <label>
          <input type="radio" value="Ya" class="radio_penerima_kps" name="radio_penerima_kps" id="penerima_kps_ya">
          Ya
      </label>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <label>
          <input type="radio" value="Tidak" class="radio_penerima_kps" name="radio_penerima_kps" id="penerima_kps_tidak" >
          Tidak
      </label>
  </div>
</div>
<div id="form_kps">
     <div class="form-group">
      <label for="name" class="col-sm-2 text-left">No. KPS / PKH
      </label>
      <div class="col-sm-5">
        <input type="text" class="form-control"  placeholder="" id="nomor_kps_pkh" name="nomor_kps_pkh" value="<?=@$registration->nomor_kps_pkh?>"  onchange="update_data()">
      </div>
    </div>
    <div class="form-group">
      <label for="name" class="col-sm-2 text-left">Usulan dari sekolah layak PIP
      </label>
      <div class="col-sm-5">
        <input type="text" class="form-control"  placeholder="" id="usulan_sekolah_layak_pip" name="usulan_sekolah_layak_pip" value="<?=@$registration->usulan_sekolah_layak_pip?>"  onchange="update_data()">
      </div>
    </div>
    <div class="form-group">
      <label for="name" class="col-sm-2 text-left">Alasan Layak
      </label>
      <div class="col-sm-5">
        <input type="text" class="form-control"  placeholder="" id="alasan_layak" name="alasan_layak" value="<?=@$registration->alasan_layak?>"  onchange="update_data()">
      </div>
    </div>
</div>

here is the code of javascript that i'm using.

$(".radio_penerima_kps").click(function () {
    if($(this).val() == "Ya"){
       $("#nomor_kps_pkh").prop("disabled", false);
       $("#usulan_sekolah_layak_pip").prop("disabled", false);
       $("#alasan_layak").prop("disabled", false);
    }else{
      $("#nomor_kps_pkh").prop("disabled", true);
       $("#usulan_sekolah_layak_pip").prop("disabled", true);
       $("#alasan_layak").prop("disabled", true);
    }
});

Upvotes: 0

Views: 1397

Answers (2)

Femi Aluko
Femi Aluko

Reputation: 42

You can change the input associated with the div by using:

$(".radio_penerima_kps").click(function () {
if($(this).val() == "Ya"){
    $('#form_kps .form-control').prop("disabled", false);

}else{
  $('#form_kps .form-control').prop("disabled", true);

}

});

So, you basically use the id of the div and the class associated with it to change the values of the input. There is no way to enable/disable divs.

Upvotes: 0

jjoselon
jjoselon

Reputation: 2811

in case condition fail, change div style. divs can not be enable or disable, only inputs 

 $("#form_kps").css('background', "#ccc")

Upvotes: 1

Related Questions