How do you set default checked value on switchery js input tag using ajax?

Question

I'm trying to set default value for the input tag with switchery plugin using the values from database with ajax, but the checked attribute doesnt update, but the update does work without the plugin, what did i do wrong? The HTML table form looks something like this :

<table>
<thead>
...
</thead>
<tbody>
    @for($j=1; $j<=10; $j++)
    ...
    <td>
      <label>
        <input id="day1-hours{{$j}}" type="checkbox" data-plugin="switchery">
        <span>Active</span>
      </label>
    </td>
    ...
    @endfor
</tbody>
</table>

Here's the ajax success function :

for(let $i=1; $i<=6; $i++){
$.ajax({
... //the POST REQUEST
success:function(data){
    for($j=1; $j<=array.length;$j++){
        if(data[$j-1] == "active"){
             $("#day"+$i+"-hours"+$j).prop("checked",true);

        }else{
             $("#day"+$i+"-hours"+$j).prop("checked",false);                 
        }
     };
   }
 ...
}

and the data from the ajax success response should be just "active" and "inactive"

Answer 1

Use the following code. It works for me.

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">

<td>
    <label>
        <input id="dayX-hoursY" type="checkbox" data-plugin="switchery" onclick="ch_label(this)">
        <span>Inactive</span>
    </label> 
</td>

success:function(){
     for($j=1; $j<=array.length;$j++){
        if(data[$j-1] == "active"){

    var css1 = 'background-color: rgb(100, 189, 99); border-color: rgb(100, 189, 99); box-shadow: rgb(100, 189, 99) 0px 0px 0px 16px inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;';
    var css2 = 'left: 20px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s; background-color: rgb(255, 255, 255);'; 

             $("#day"+$i+"-hours"+$j).attr('checked',true);
             $("#day"+$i+"-hours"+$j).parent().find('span').eq(0).attr('style', css1);
             $("#day"+$i+"-hours"+$j).parent().find('span').eq(0).find('small').attr('style',css2);
             var init = new Switchery($("#day"+$i+"-hours"+$j));
             $("#day"+$i+"-hours"+$j).prop('checked', true);
             $("#day"+$i+"-hours"+$j).parent().find('span').eq(1).text('Active'); 
        }else{

    var css3 = 'background-color: rgb(255, 255, 255); border-color: rgb(223, 223, 223); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;';
    var css4 = 'left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;'; 

             $("#day"+$i+"-hours"+$j).attr('checked',false);
             $("#day"+$i+"-hours"+$j).parent().find('span').eq(0).attr('style',css3);
             $("#day"+$i+"-hours"+$j).parent().find('span').eq(0).find('small').attr('style',css4);
             var init = new Switchery($("#day"+$i+"-hours"+$j));
             $("#day"+$i+"-hours"+$j).prop('checked', false); 
             $("#day"+$i+"-hours"+$j).parent().find('span').eq(1).text('Inactive');               
        }
     };
 }

function ch_label(btn){

   btn.checked == true ? 
            btn.parentNode.children[2].firstChild.nodeValue = 'Active' : 
            btn.parentNode.children[2].firstChild.nodeValue = 'Inactive';
}

My example HTML:

<td>
    <label>
        <input id="day1-hours" type="checkbox" data-plugin="switchery" onclick="ch_label(this)">
        <span>Inactive</span>
    </label> 
</td>

<button id="btn">Run</button>

<td>
    <label>
        <input id="day2-hours" type="checkbox" data-plugin="switchery" checked onclick="ch_label(this)">
        <span>Active</span>
    </label> 
</td>

<button id="btn2">Run</button>

JS:

var elem = document.querySelector('#day1-hours');
var init = new Switchery(elem);

var elem2 = document.querySelector('#day2-hours');
var init2 = new Switchery(elem2);

$('#btn').click(function(){

    var css1 = 'background-color: rgb(100, 189, 99); border-color: rgb(100, 189, 99); box-shadow: rgb(100, 189, 99) 0px 0px 0px 16px inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;';
    var css2 = 'left: 20px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s; background-color: rgb(255, 255, 255);'; 

    $('#day1-hours').attr('checked',true);
    $('#day1-hours').parent().find('span').eq(0).attr('style', css1);
    $('#day1-hours').parent().find('span').eq(0).find('small').attr('style',css2);
    var init = new Switchery($('#day1-hours'));
    $('#day1-hours').prop('checked', true);
    $('#day1-hours').parent().find('span').eq(1).html('Active');
});

$('#btn2').click(function(){

    var css3 = 'background-color: rgb(255, 255, 255); border-color: rgb(223, 223, 223); box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset; transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;';
    var css4 = 'left: 0px; transition: background-color 0.4s ease 0s, left 0.2s ease 0s;'; 

    $('#day2-hours').attr('checked',false);
    $('#day2-hours').parent().find('span').eq(0).attr('style',css3);
    $('#day2-hours').parent().find('span').eq(0).find('small').attr('style',css4); 
    var init = new Switchery($('#day2-hours'));
    $('#day2-hours').prop('checked', false); 
    $('#day2-hours').parent().find('span').eq(1).html('Inactive');
});

I'm adding and removing checked attribute, changing css styling and re-initializing the plugin.

Check it

Note: you can pre-define your css, I've used default style. Do it in if statement.