选中 Backbone 中的复选框时禁用输入字段

Question

我是 Backbone.js 和 jQuery 的新手，我试图在选中复选框时将表单的输入字段设置为 "disabled"。我不确定我是否必须按照下面代码中显示的方式进行操作，如果是这样，我应该在 disableInput 函数中做什么？

JS

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

disableInput : function(){
...
}

HTML

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

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

Answer 1

这是一个简单的衬垫当然，我不熟悉 backbone.js，但您应该能够弄清楚如何合并它。

function disableInput(){
document.getElementById("myInput").disabled=document.getElementById('myCheckbox').checked
}

<div class="x">
      <input type="text" id="myInput">
      <input type="checkbox" onchange="disableInput();" id="myCheckbox">
<div>

Answer 2

如果您想走纯粹的 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"。

Answer 3

我认为Backbone方式如下

events: {
    "change #myCheckbox": function() {this.disableInput.apply(this, arguments);}
},

disableInput: function(args) {
    var checked = $(args.target).is(":checked");
    this.$el.find("#myInput").disabled = checked;
}

选中 Backbone 中的复选框时禁用输入字段

Disable an input field when checking a checkbox in Backbone

javascript

backbone.js