CODEWITHSUNDEEP
javascriptphpjqueryhtml
Khairul Amir
Khairul Amir

Reputation: 11

Disable button using Jquery if and else function

Screenshot i want to disable my button using if and else statement. If value on the input text "Tidak Diluluskan" the button disable else text " Proses " the button enable. Here my simple code.. Hope someone can help me figure this out. 

<script>
    $(document).ready( function () {
       if(textstatusmodal.value =="Tidak Diluluskan"){
        $('button:submit').attr("disabled", 'disabled');
         }else{
           if(textstatusmodal.value =="Proses"){
             $('button:submit').attr("enable", 'enable');
             }
           }
       }
    });
    // $(this).attr("disabled", "disabled");
    //$(this).removeAttr("disabled");//enable button again
</script
<form method="POST" action="<?php echo $editFormAction; ?>" name="form2" class="form-horizontal">
<fieldset>

 
<input id="textstatusmodal" name="textstatusmodals"  type="type" value="<?php echo $row_p_peribadi_kecemasan['status']; ?>"> 

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="selectbasic">Pilihan</label>
  <div class="col-md-5">
    <select id="selectbasic" name="selectbasic" required class="form-control">
      <option value="">Sila Pilih</option>
      <option value="Batal">Batal</option>
    </select>
  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="textcatatan">Catatan</label>
  <div class="col-md-4">                     
    <textarea class="form-control" required id="textcatatan" name="textcatatan"></textarea>
  </div>
</div>

      </div>
      <div class="modal-footer">
        <button  id="button3" type="submit" onclick="return confirm('Batal Pegerakan Bagi No Permohonan:<?php echo $row_p_peribadi_kecemasan['nopermohonan']; ?>?')" class="btn btn-success">Kemaskini</button>
        <button id="button4" class="btn btn-info" data-dismiss="modal">Tutup</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Upvotes: 0

Views: 5396

Answers (3)

Moe
Moe

Reputation: 1599

What's textstatusmodal in your code? If it's the Id of your text box then using JQuery the code should be something like this:

Add an event to your textbox, assuming onblur in the following snippet.

EDIT

Adding Trim & To Lower Case.

   $(document).ready(function() {
$('#textstatusmodal').blur(function () {
         if($(this).val().toLowerCase().trim() =="tidak diluluskan"){
                $('#button3').attr('disabled', 'disabled');
                 }else{
                   if($(this).val().toLowerCase().trim() =="proses"){
                     $('#button3').removeAttr('disabled');
                     }
                   }
}
    });

Consider adding Trim() and ToLowerCase() in your comparison.

Upvotes: 1

Joy Biswas
Joy Biswas

Reputation: 6527

To disable use $('button:submit').prop('disabled', true);

To enable use $('button:submit').prop('disabled', false);

Check snippet below.

function changeState(n){
  var st = $(n).html().trim()=='Enable';
  if(st){
    $(n).html('Disable');
    $('#button3').prop('disabled',false);
  }else{
    $(n).html('Enable');
    $('#button3').prop('disabled',true);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeState(this);">Disable</button>
<div class="modal-footer">
  <button  id="button3" type="submit" class="btn btn-success">Kemaskini</button>
  <button id="button4" class="btn btn-info" data-dismiss="modal">Tutup</button>
</div>

Upvotes: 0

Akash Agrawal
Akash Agrawal

Reputation: 31

$(document).ready(function() {
  var btn = document.getElementById("button3");
  if (textstatusmodal.value == "Tidak Diluluskan") {
    btn.disabled=true;
  } else {
    if(textstatusmodal.value == "Proses") {
      btn.disabled=false;
    }
  }
});

Upvotes: 0

Related Questions