如何在复选框未勾选时禁用按钮

下面提供几种常见的实现方案，根据你的技术栈选择即可：

原生JavaScript方案 #

先写基础的HTML结构，复选框默认设置checked属性，按钮初始状态可用：

<input type="checkbox" id="termsCheckbox" checked>
<label for="termsCheckbox">我同意服务条款</label>
<button id="submitBtn">继续操作</button>

然后添加JavaScript逻辑，监听复选框的状态变化，同步控制按钮的禁用状态：

const checkbox = document.getElementById('termsCheckbox');
const submitBtn = document.getElementById('submitBtn');

// 初始状态（可选，因复选框默认勾选，按钮本来就可用）
submitBtn.disabled = !checkbox.checked;

// 监听复选框变化事件
checkbox.addEventListener('change', function() {
  submitBtn.disabled = !this.checked;
});

jQuery方案 #

如果你的项目使用jQuery，可以用更简洁的代码实现：

<input type="checkbox" id="termsCheckbox" checked>
<label for="termsCheckbox">我同意服务条款</label>
<button id="submitBtn">继续操作</button>

$(document).ready(function() {
  const $checkbox = $('#termsCheckbox');
  const $submitBtn = $('#submitBtn');

  // 初始状态
  $submitBtn.prop('disabled', !$checkbox.prop('checked'));

  // 监听变化
  $checkbox.on('change', function() {
    $submitBtn.prop('disabled', !$(this).prop('checked'));
  });
});

Vue.js方案（以Vue 3为例） #

如果是Vue项目，可以直接通过数据绑定实现响应式控制：

<template>
  <div>
    <input type="checkbox" v-model="isTermsChecked" checked>
    <label>我同意服务条款</label>
    <button :disabled="!isTermsChecked">继续操作</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const isTermsChecked = ref(true); // 初始勾选
</script>

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