Toggle Disabled

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- 禁用状态开关 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">禁用状态开关</h3>
      <div class="space-y-6">
        <!-- 未选中禁用 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-not-allowed">
            <input type="checkbox" disabled class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-100 border border-gray-200 peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all opacity-60"></div>
          </label>
          <span class="text-sm text-gray-500">未选中禁用</span>
        </div>

        <!-- 选中禁用 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-not-allowed">
            <input type="checkbox" checked disabled class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-300 opacity-60"></div>
          </label>
          <span class="text-sm text-gray-500">选中禁用</span>
        </div>
      </div>
    </div>

    <!-- 带标签的禁用开关 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">带标签的禁用开关</h3>
      <div class="space-y-6">
        <!-- 带标签的未选中禁用 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-not-allowed">
            <input type="checkbox" disabled class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all opacity-60"></div>
            <span class="ml-3 text-sm font-medium text-gray-400">启用通知</span>
          </label>
        </div>

        <!-- 带标签的选中禁用 -->
        <div class="flex items-center gap-2">
          <label class="inline-flex items-center cursor-not-allowed">
            <span class="mr-3 text-sm font-medium text-gray-400">暗黑模式</span>
            <input type="checkbox" checked disabled class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-300 opacity-60"></div>
          </label>
        </div>
      </div>
    </div>

    <!-- 带描述的禁用开关 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">带描述的禁用开关</h3>
      <div class="flex items-start">
        <div class="flex items-center h-5">
          <label class="inline-flex items-center cursor-not-allowed">
            <input type="checkbox" disabled checked class="sr-only peer">
            <div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-300 opacity-60"></div>
          </label>
        </div>
        <div class="ml-3 text-sm">
          <label class="font-medium text-gray-400">电子邮件更新</label>
          <p class="text-gray-400">在发布新功能时获取通知</p>
        </div>
      </div>
    </div>
    
    <!-- 在表单中的禁用开关 -->
    <div class="space-y-4">
      <h3 class="text-lg font-medium text-gray-900">在表单中的禁用开关</h3>
      <fieldset class="border border-gray-200 rounded-lg p-4">
        <legend class="text-sm font-medium text-gray-500 px-2">隐私设置 (禁用)</legend>
        <div class="space-y-3">
          <div class="flex items-start">
            <div class="flex items-center h-5">
              <label class="inline-flex items-center cursor-not-allowed">
                <input type="checkbox" disabled class="sr-only peer">
                <div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all opacity-60"></div>
              </label>
            </div>
            <div class="ml-3 text-sm">
              <label class="font-medium text-gray-400">记住我</label>
              <p class="text-gray-400">在此设备上保持登录状态</p>
            </div>
          </div>
          <div class="flex items-start">
            <div class="flex items-center h-5">
              <label class="inline-flex items-center cursor-not-allowed">
                <input type="checkbox" checked disabled class="sr-only peer">
                <div class="relative w-11 h-6 bg-gray-100 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-gray-300 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-300 opacity-60"></div>
              </label>
            </div>
            <div class="ml-3 text-sm">
              <label class="font-medium text-gray-400">使用数据</label>
              <p class="text-gray-400">允许我们收集匿名使用数据</p>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  </div>
</section>