选择复选框的所有方法，不应在 vue.js 中选择禁用复选框答案

【问题标题】：select all method for checkboxes , should not select disabled checbox in vue.js选择复选框的所有方法，不应在 vue.js 中选择禁用复选框
【发布时间】：2019-10-15 01:23:00
【问题描述】：

我在表格中有一个带有复选框的列表，当我单击全选功能时，它会选择所有复选框，包括禁用的复选框，我需要排除禁用的复选框。

      <li><a @click.prevent="selectAll" id="cardSelectAllAId"> 
        SelectAll</a></li>

      <single-checkbox class="checkbox "
                 inputId="card.data.id"
                     v-if="card.data.id"
             @change="change(card.data)"
             :value="card.data.selected"
        :disabled="!card.data.licenseEnabled">



      selectAll() {
       for (let i = 0; i < this.cards.length; i += 1) {
        if (this.cards[i].selected !== undefined) {
         this.cards[i].selected = true;
        }
      },

【问题讨论】：

你试过什么？它应该像将 if 条件更改为 if(this.cards[i].selected !== undefined && this.cards[i].licenceEnabled) 一样简单。此外，您的逻辑使用card[i]，但在模板中它用作card.data card 来自模板中的哪里？
cards 来自数据源 props 。这个条件没用，我之前试过
我尝试通过获取类名并检查它是否被禁用
明白。每个卡片项目都有data 字段吗？另一件需要注意的小事：在子组件内部改变传入的 props 形式可能是个坏主意。可能有更好的方法来做到这一点
是的，它确实有数据

标签： javascript vue.js vue-component

【解决方案1】：

你可以在你的函数中尝试这样的事情-

  // Reset all selected first
  this.cards.map((x) => x.selected = false);
  // Filter and then set selected to true
  this.cards
    .filter((x) => x.data.licenseEnabled)
    .map((x) => x.selected = true);

【讨论】：

【解决方案2】：

    if(this.cards[i].selected !== undefined && this.cards[i].licenseEnabled)

这行得通

【讨论】：