javascript - 在 Backbone 中选中复选框时禁用输入字段

Question

我对 Backbone.js 和 jQuery 完全陌生，当我选中复选框时，我试图将表单的输入字段设置为“禁用”。我不确定是否必须按照下面代码中所示的方式进行操作，如果是这样，我应该在disableInput函数中做什么？

JS

events: {
    'change #myCheckbox': 'disableInput',
},

disableInput : function(){
...
}

HTML

<div class="x">
      <input type="text" id="myInput">
      <input type="checkbox" id="myCheckbox">
<div>

编辑:这可能看起来像是其他帖子的重复，但这些问题是关于普通 JS 我在这里使用 Backbone，所以它不一样。

Answer 1

如果你想走纯 CSS 路线，你可以将复选框放在文本上方，并使用 flexbox 将顺序切换到你喜欢的位置。然后，您可以编写 CSS 来更改同级复选框的 opacity 和 pointer-events。

.x {
  display: flex;
}

.x #myCheckbox {
  order: 2;
}

.x #myCheckbox:checked + #myInput {
  pointer-events: none;
  opacity: 0.6;
}

<div class="x">
  <input type="checkbox" id="myCheckbox">
  <input type="text" tabindex="-1" id="myInput">
</div>

标签问题

为了阻止某人使用 Tab 键进入输入，您可以将 tabindex="-1" 添加到输入。