如何使用 ajax 在 switchery js 输入标签上设置默认检查值？

Question

我正在尝试使用带有 ajax 的数据库中的值为带有 switchery 插件的输入标签设置默认值，但是选中的属性不会更新，但是在没有插件的情况下更新确实有效，我做错了什么？ HTML 表格看起来像这样：

<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>

这里是ajax成功函数：

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);                 
        }
     };
   }
 ...
}

来自 ajax 成功响应的数据应该只是“活动”和“非活动”

Answer 1

使用以下代码。它对我有用。

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';
}

我的例子 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');
});

我正在添加和删除 checked 属性，更改 css 样式并重新初始化插件。

检查一下

注意：您可以预先定义您的css，我使用的是默认样式。在if statement 中进行操作。