在Backbone中勾选复选框时禁用输入框的实现方法

嗨～作为Backbone.js和jQuery的新手，其实用Backbone来实现这个需求特别规整，和原生JS的写法确实不太一样，我给你一步步讲清楚怎么弄：

第一步：先准备HTML结构 #

先把你的表单元素写好，比如：

<form>
  <label>
    <input type="checkbox" class="toggle-input"> 勾选禁用输入框
  </label>
  <input type="text" class="target-input" placeholder="试试输入内容">
</form>

（这里用类名代替ID，后续扩展更灵活，当然用ID也没问题）

第二步：写Backbone视图（核心部分） #

Backbone的视图会帮你把事件绑定和DOM逻辑封装在一起，代码结构更清晰：

var InputToggleView = Backbone.View.extend({
  // 绑定到表单元素作为视图的根容器
  el: 'form',

  // 定义事件：复选框的change事件触发disableInput函数
  events: {
    'change .toggle-input': 'disableInput'
  },

  // 初始化视图时可以设置初始状态（可选）
  initialize: function() {
    // 默认让输入框处于启用状态
    this.$('.target-input').prop('disabled', false);
  },

  // 你关心的disableInput函数就在这里！
  disableInput: function(e) {
    // 先获取复选框的勾选状态
    var isChecked = $(e.target).is(':checked');
    // 用jQuery的prop方法设置输入框的disabled状态
    this.$('.target-input').prop('disabled', isChecked);
  }
});

// 最后实例化视图，让它生效
new InputToggleView();

为什么和原生JS不一样？ #

你提到其他帖子是原生JS，Backbone的优势在于：

• 事件是委托绑定的（基于视图的根容器el），即使后续动态添加的元素也能触发事件，比原生的addEventListener更灵活
• 视图把DOM操作和业务逻辑封装在一起，代码模块化，后续维护扩展更方便
• this.$()是Backbone封装的jQuery选择器，只会在视图范围内查找元素，避免全局DOM查找的性能问题和命名冲突

小补充 #

如果你的输入框是通过Backbone模型动态渲染的，还可以在render方法里同步状态，或者监听模型变化来自动更新输入框的禁用状态，不过对于你的基础需求，上面的代码完全够用啦～

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