如何解决MUI中Checkbox标签内点击链接同时触发勾选的问题

解决方案 #

该问题是<label>标签的默认关联行为导致的：<label> 元素会和内部绑定的input控件关联，点击label内任意区域都会自动触发对应input的选中状态切换。你只需要在链接/按钮的点击回调中阻止事件冒泡即可，不需要调整原有结构，也不会影响已有样式。

修改后代码 #

<FormGroup row className={localClasses.greenCheckbox}>
  <FormControlLabel
    control={
      <Checkbox
        checked={state.lgpd_agreement}
        onChange={lgpdAgreementOnChange}
        name="lgpd_agreement"
      />
    }
    label={
      <p>
        Autorizo a #### coletar e armazenar meus dados com a finalidade
        de fornecer os serviços do programa conforme o respectivo
        Termo&nbsp;
        <span 
          className={localClasses.openDialogButton} 
          onClick={(e) => {
            // 阻止事件冒泡到上层label，避免触发Checkbox勾选
            e.stopPropagation();
            handleOpenModal('authTerm');
          }}
        >
          Ler
        </span>
      </p>
    }
  />
</FormGroup>

补充说明 #

如果你后续把span替换为<a>标签实现跳转类效果，还可以额外添加e.preventDefault()避免触发标签的默认跳转行为，当前场景仅用e.stopPropagation()就可以解决问题。

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