How will I condition my checkbox according to a status using jquery and PHP

I have a data where you can choose to activate it or inactivate it. The process when you want to choose a status is through a bootstrap toggle switch. I used checkbox to make the toggle switch. The problem is it is not working and I know why. Because it doesn’t have an access to my checkbox, My goal is that inside my form if my data is active the checkbox will automatically be set “checked” and if inactive, the checkbox will be unchecked. Second problem is to my toggle switch is not working.

How can I set the checkbox checked if the status is active and how can I make automatically uncheck inside my form if status is Inactive?

How can I use the toggle switch from bootstrap properly?

What I’ve tried is to condition the checkboxes

Here is the code I’ve tried but still did not work

if(status == 1)
    {
        $("#update_chk").prop('checked', true);
    }
    else
    {
        $("#update_chk").prop('checked', false);
    }

Here is my code in HTML

<input type="checkbox" name="update_stats" id="update_chk" checked
 data-toggle="toggle"
 data-onstyle="<?php echo ($rows['status']) ? 'success' : 'danger'?>"
 data-offstyle="<?php echo ($rows['status']) ? 'danger' : 'success'?>"
 data-on="<?php if($rows['status'] == 1) { echo 'Active'; } else { echo 'Inactive'; }?>"
 data-off="<?php if($rows['status'] == 0) { echo 'Active'; } else { echo 'Inactive'; }?>"
 data-id="<?php echo $rows['ID'];?>"
 class="status_checks <?php echo ($rows['status']) ? 'btn-success' : 'btn-danger'?>"
 value="1">

JQUERY code

    $(document).on('click', '.status_checks', function() {

    var val = $(this).val();
    var status = '1';
    var selector = $(this);
    var id = $(this).data('id');
    $("#reason").html("");
    // alert(id);

    if ($(this).hasClass("btn-success")) {
        status = '0';

        $("#reason").append(
            '<div><label> Reason for making it inactive? </label><font color=red>*</font></div>');

        var input = $('<input>', {
            id: 'reason_elem',
            name: 'reason_input_elem',
            type: 'text',
            class: 'form-control has-error has-danger',
            focusin: function() {
                $(this).val('');
            }
        }).appendTo('#reason');
    }
    // alert(val);
    // alert(status);

    selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass("btn-danger"),
        selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass("btn-success"),
        selector.text("Active"));
});

This is suppose to be unchecked if the data is inactive

Answer

You can use removeAttr() and attr to add checked or remove that attribute . Then , no need to change text from jquery code bootstrap toggle will do itself just specify style and on/off condition.

Demo Code :

$(document).on('change', '.status_checks', function() {
  var val = $(this).val();
  var status = '1';
  var selector = $(this);
  var id = $(this).data('id');
  $("#reason").html("");
  if ($(this).hasClass("btn-success")) {
    status = '0';
    $("#reason").append(
      '<div><label> Reason for making it inactive? </label><font color=red>*</font></div>');

    var input = $('<input>', {
      id: 'reason_elem',
      name: 'reason_input_elem',
      type: 'text',
      class: 'form-control has-error has-danger',
      focusin: function() {
        $(this).val('');
      }
    }).appendTo('#reason');
  }
  console.log("is checked ?" + $(this).is(":checked"))
  //here remve and add checked attr
  selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass("btn-danger"),
    selector.removeAttr("checked")) : (selector.removeClass("btn-danger").addClass("btn-success"),
    selector.attr('checked', 'checked'));
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<!--here for on state add active and for off state add inactive same for on and of style-->
<input type="checkbox" name="update_stats" id="update_chk" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-on="Active" data-off="Inactive" data-id="1" class="status_checks btn-success" value="1">

<div id="reason"></div>

Advertisement

Answer