Question

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

这是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将下拉列表的启用/禁用绑定到复选框？

Answer 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 },
      ]
    }
  },
})

我已附上(1)。

绑定特定复选框以禁用VueJS中的特定下拉列表？

1 个答案: