如何在Quasar q-checkbox中创建带链接的复选框且不触发勾选事件

针对你的需求，这里提供一个可行的实现方案，核心是通过阻止事件冒泡和禁用指针事件来分别控制两部分文本的交互行为：

q-checkbox(v-model="termsAccepted" color="primary")
  span.text-regular(style="pointer-events: none; cursor: default") I have read and understood the
  a.cursor-pointer.text-primary.text-underline(@click.stop="openConditionsDialog()") User Clarification Text.

关键说明： #

• 不可点击文本部分：给span添加pointer-events: none样式，直接禁用该区域的所有指针事件，点击时不会触发复选框的勾选操作；同时设置cursor: default，明确提示该区域不可交互。
• 可点击链接部分：使用Vue的@click.stop事件修饰符，阻止点击事件向上冒泡到q-checkbox组件，这样点击链接时只会触发弹窗逻辑，不会触发复选框的状态切换。
• 整个标签内容放在q-checkbox的默认插槽中，确保文本与复选框保持关联，避免方案1中分离的布局问题。

为什么之前的方案失效： #

• 方案1：文本与复选框分离布局，且可能因样式层级或事件拦截导致点击事件无法触发，同时不符合复选框标签的关联逻辑。
• 方案2：未阻止事件冒泡，点击链接时事件会传递到q-checkbox组件，导致复选框状态被意外切换。

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