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>

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

Answer 1

如果您想使用纯CSS路线，可以将复选框放在文本上方，然后使用flexbox按顺序切换顺序。然后，您可以编写更改opacity和pointer-events的CSS作为复选框兄弟。

＆＃13;

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

＆＃13;

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

＆＃13;

标签问题

为了阻止某人选择加入输入，您可以将tabindex="-1"添加到输入中。

Answer 2

这是一个简单的一个班轮当然，我对backbone.js并不熟悉，但你应该能够弄清楚如何融入它。

＆＃13;

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

＆＃13;

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

＆＃13;

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中的复选框时禁用输入字段

3 个答案: