如何根据PHP变量设置jQuery切换按钮的默认状态？

我用jQuery开发了一个开关按钮，点击时执行不同逻辑，状态存储在变量$open中。目前按钮默认显示为Enabled，但需要在页面加载时根据数据库存储的PHP变量值，让按钮默认显示为Enabled或Disabled（例如数据库存储状态为“open”时显示Enabled，为“closed”时显示Disabled）。

原前端代码：

<form id="myForm" name="myForm" action="open.php" method="post"> 
      <input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" value="Disabled" data-off="Disabled" data-on="Enabled" checked>
    </form>
    <br><br>
    <div class="panel panel-default">
    <div class="panel-heading" id="heading"></div>
    <div class="panel-body" id="body"></div>
  </div>
    <div></div>
    <script>
      $('#toggle').change(function(){
        var mode= $(this).prop('checked');
        $.ajax({
          type:'POST',
          dataType:'JSON',
          url:'open.php',
          data:'mode='+mode,
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
            $("#heading").html(success);
            $("#body").html(message);
          }
        });
      });
</script> 

原后端open.php代码：

$mode=$_POST['mode'];
 
if ($mode == 'true')   // mode is true when button is enabled
{
    $message='Hey my button is enabled!!';
    $success='Enabled';
    echo json_encode(array('message'=>$message,'$success'=>$success));
}
else if ($mode == 'false')    // mode is false when button is disabled
{
    $message='Hey my button is disabled!!';
    $success='Disabled';
    echo json_encode(array('message'=>$message,'success'=>$success));
}

1. 从数据库读取状态并传递到前端 #

在渲染HTML的PHP页面（不是open.php）中，先从数据库获取存储的状态：

// 示例：从数据库查询状态，替换为你实际的数据库查询逻辑
$db_status = "open"; // 实际值可通过mysqli/PDO从数据库获取，比如查询后返回"open"或"closed"

2. 动态设置开关按钮的默认状态 #

修改前端的checkbox标签，用PHP动态控制checked属性和value值：

<form id="myForm" name="myForm" action="open.php" method="post"> 
  <input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" 
         <?php echo $db_status === 'open' ? 'checked value="Enabled"' : 'value="Disabled"' ?>
         data-off="Disabled" data-on="Enabled">
</form>

如果使用Bootstrap Toggle插件，需确保页面加载时初始化插件，在script中添加：

$(document).ready(function() {
  $('#toggle').bootstrapToggle();
});

3. 修复后端代码的键名错误 #

原open.php中第一个分支的'$success'键名多了美元符号，导致前端无法正确获取值，修正后：

$mode = $_POST['mode'];

if ($mode == 'true') {
    $message = 'Hey my button is enabled!!';
    $success = 'Enabled';
    echo json_encode(array('message' => $message, 'success' => $success));
} else if ($mode == 'false') {
    $message = 'Hey my button is disabled!!';
    $success = 'Disabled';
    echo json_encode(array('message' => $message, 'success' => $success));
}

4. 优化前端AJAX逻辑 #

原代码中eval(data)无需使用（已指定dataType:'JSON'，jQuery会自动解析为对象），同时用对象形式传递参数更规范：

$('#toggle').change(function(){
  var mode = $(this).prop('checked');
  $.ajax({
    type:'POST',
    dataType:'JSON',
    url:'open.php',
    data: { mode: mode },
    success:function(data) {
      $("#heading").html(data.success);
      $("#body").html(data.message);
    }
  });
});

内容的提问来源于stack exchange，提问作者shadow1200