事实证明，你可以让<button>操作一个输入，但前提是你把<label> * 放在<button> * 里面。

<button type="button">
  <label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">

尽管这违反了W3C规范：
交互式元素标签不能作为按钮元素的后代出现。https://www.w3.org/TR/html-markup/label.html

您可以执行以下操作：

<label>
 <button></button>
</label>

中央支助系统

label {
    cursor: pointer; // not necessary but probably a good idea.
    display: block; // depending on your structure.
}
button {
    pointer-events: none;
}

display: block on label只有在标签的边界框完全封装其子标签（本例中为按钮）时才是必需的。

您可以使用透明伪元素来覆盖复选框和按钮本身，以便捕获鼠标事件。
下面是一个例子：
网页：

<label>
  <input type="checkbox">
  <button class="disable">button</button>
</label>

CSS：

.disable{pointer-events:fill}
label{position:relative}
label:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: transparent;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

超文本：

<label for="whatev"
       onclick="onClickHandler">
    <button>Imma button, I prevent things</button>
</label>

联森：

const onClickHandler = (e) => {
    if(e.target!==e.currentTarget) e.currentTarget.click()
}

Target是单击目标，currentTarget是本例中的标签。
如果没有if语句，则在事件阻止区域之外单击时会触发两次事件。
未进行跨浏览器测试。

最好的解决办法就是把样式像纽扣一样。
如果你使用的是CSS框架，比如bootstrap，你可以给予标签类btn和btn-default，这会使它的样式像按钮一样，你可能需要手动调整css属性的line-height，如下所示：

label.btn {
    line-height: 1.75em;
}

然后，要将单击样式作为按钮，请添加以下样式：

input[type=radio]:checked ~ label.btn {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}

这将接受被选中的输入，并给予dom中下一个标签元素，该元素具有类btn，引导btn-默认按钮单击样式。

我在这里找到了解决方案：https://codepen.io/nevena/pen/OEgaNW

label {
  padding: 15px;
  border: 1px solid  red;
  display: inline-block;
}

hr {
  margin: 20px 0;
}

<input id='myinput' type="checkbox"/>

<hr/>

<button>
  <label for='myinput'>label inside a button</label>
</button>

<hr/>

<label for='myinput'>
  <button>Button inside a label</button>
</label>