绑定特定复选框以禁用 VueJS 中的特定下拉菜单？答案

【问题标题】：Bind specific checkbox to disable specific dropdown in VueJS?绑定特定复选框以禁用 VueJS 中的特定下拉菜单？
【发布时间】：2017-05-11 14:50:00
【问题描述】：

我有一个表格，每一行都有一个复选框、名称、另一个复选框和下拉列表。我希望默认禁用下拉菜单，并且仅在选中第一个复选框时启用它。

这是 HTML：

<tbody>
    <tr v-for="item in Items" v-bind:id="item.ID">
        <td>
            <!-- check this checkbox and enable/disable the dropdown -->
            <input type="checkbox" v-on:click="onSelect($event)" v-model="item.Selected" />
        </td>
        <td>
            {{ item.Name }}
        </td>
        <td>
            <input type="checkbox" v-model="item.isActive" /><
        <td>
            <!-- enabled/disabled depending on if checkbox is checked -->
            <select v-bind:disabled="">
                <option value="foo">foo</option>
                <option value="bar">bar</option>
            </select>
        </td>
    </tr>
</tbody>

目前，onSelect($event) 方法在选中时会选中同一行中的第二个复选框。

这是我的 JavaScript：

var vm = new Vue({
    el: '#app',
    data: {
        items: items
    },
    methods: {
        onSelect: function (event, id) {
            setTimeout(function () {
                var idx = $(event.target).closest('tr').index();
                if (items[idx].Selected) {
                    items[idx].isActive = true;
                }
            }, 100);
        }
    }
});

有没有办法使用 VueJS 2/JavaScript/jQuery 将下拉菜单的启用/禁用绑定到复选框？

【问题讨论】：

标签： javascript jquery html checkbox vue.js

【解决方案1】：

您实际上不需要为此使用 jQuery 或事件，而是可以简单地使用 Vue 的数据绑定。只需在第一个复选框上设置v-model="item.Selected"，然后在选择上设置v-bind:disabled="!item.Selected"。

HTML：

<!-- index.html -->
<div id="app">
  <table>
    <tbody>
      <tr v-for="item in items">
        <td>
          <!-- check this checkbox and enable/disable the dropdown -->
          <input type="checkbox" v-model="item.Selected"/>
        </td>
        <td>
          {{ item.Name }}
        </td>
        <td>
          <!-- enabled/disabled depending on if checkbox is checked -->
          <select v-bind:disabled="!item.Selected">
            <option value="foo">foo</option>
            <option value="bar">bar</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript：

// app.js
const vm = new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { ID: 1, Name: 'name 1', isAcitve: false, Selected: false },
        { ID: 2, Name: 'name 2', isAcitve: false, Selected: false },
        { ID: 3, Name: 'name 3', isAcitve: false, Selected: false },
      ]
    }
  },
})

我已附上a pen which displays this。

【讨论】：