如何为HTML现有按钮添加有效链接（复选框触发场景）

核心问题 #

1. HTML结构错误：你将<a>标签直接嵌套在<button>内，这不符合HTML规范，会导致点击行为冲突，无法触发链接跳转。
2. disabled属性对<a>标签无效：disabled是表单元素（如button、input）专属属性，<a>标签不支持该属性，即便脚本移除disabled，也无法让链接正常工作。

修改方案 #

方案1：使用<a>标签实现（推荐） #

步骤1：修正HTML结构

删除错误的<button>标签，保留<a>标签并通过CSS模拟禁用样式：

<form action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>I am a Medical Practitioner</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Accept Terms & Condition</span>
    </label>
  </p>
  <!-- 修正后的链接按钮 -->
  <a href="http://www.google.com" class="toggle-disabled" style="pointer-events: none; opacity: 0.5;">Take the Survey</a>
</form>

步骤2：修改脚本逻辑

通过调整CSS样式控制链接的可点击状态：

$('form input[type="checkbox"]').change(function(){
  var totalCheckboxes = $('form input[type="checkbox"]').length;
  var checkedCount = $('form input[type="checkbox"]:checked').length;
  var surveyLink = $('.toggle-disabled');
  
  if(totalCheckboxes !== checkedCount){
    // 禁用状态：阻止点击，添加禁用样式
    surveyLink.css({
      'pointer-events': 'none',
      'opacity': '0.5'
    });
  } else {
    // 启用状态：允许点击，恢复正常样式
    surveyLink.css({
      'pointer-events': 'auto',
      'opacity': '1'
    });
  }
});

方案2：使用<button>标签实现 #

若偏好按钮形式，可通过点击事件触发跳转：

步骤1：修正HTML结构

<form action="#">
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>I am a Medical Practitioner</span>
    </label>
  </p>
  <p>
    <label>
      <input type="checkbox" class="filled-in box required" name="item" />
      <span>Accept Terms & Condition</span>
    </label>
  </p>
  <!-- 使用button元素 -->
  <button type="button" class="toggle-disabled" disabled>Take the Survey</button>
</form>

步骤2：修改脚本逻辑

添加按钮点击跳转的触发逻辑：

$('form input[type="checkbox"]').change(function(){
  var totalCheckboxes = $('form input[type="checkbox"]').length;
  var checkedCount = $('form input[type="checkbox"]:checked').length;
  var surveyBtn = $('.toggle-disabled');
  
  if(totalCheckboxes !== checkedCount){
    surveyBtn.prop('disabled', true);
  } else {
    surveyBtn.prop('disabled', false);
  }
});

// 按钮点击跳转逻辑
$('.toggle-disabled').click(function(){
  if(!$(this).prop('disabled')){
    window.location.href = 'http://www.google.com';
  }
});

关键修改点总结 #

• 移除<button>与<a>的错误嵌套结构，二选一使用合适元素
• 针对<a>标签，用CSS样式模拟禁用状态，替代无效的disabled属性
• 针对<button>标签，通过点击事件触发页面跳转

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