除非选中复选框,否则禁用按钮(Angular 7+)?

Posted

技术标签:

【中文标题】除非选中复选框,否则禁用按钮(Angular 7+)?【英文标题】:Disable button unless checkbox is checked (Angular 7+)? 【发布时间】:2020-04-11 10:09:22 【问题描述】:

除非选中所有复选框,否则我想禁用按钮?你如何在 Angular 中实现这一点?

这是不同的,因为它不是一个表单,而且这个问题没有得到回答,因为没有 for 循环。

    <div class="md-input-group md-checkbox md-input--nested-1">
      <input type="checkbox" class="md-input md-checkbox__input" id="checkboxNested1" name="checkboxNested1">
      <label style="margin-left: -30px;" class="md-checkbox__label" for="checkboxNested1">
        <p>Checkbox 1</p>
      </label>
    </div>

    <div class="md-input-group md-checkbox md-input--nested-1">
      <input type="checkbox" class="md-input md-checkbox__input" id="checkboxNested1" name="checkboxNested1">
      <label style="margin-left: -30px;" class="md-checkbox__label" for="checkboxNested1">
        <p>Checkbox 2</p>
      </label>
    </div>

   <button class="md-button" md-button color="red" aria-label="delete">Delete organization</button>


【问题讨论】:

这能回答你的问题吗? Angular2, disable button if no checkbox selected 我会给你一些提示。这些都可以在文档中找到。 [disabled] 将控制按钮是否被禁用,您可以使用表单控件对复选框进行验证。 angular.io/guide/form-validation 但它不是表格 Angular2 没有回答我的问题,因为他有多个复选框。我只想为 2 个不同的输入做这件事 这是不同的问题。 【参考方案1】:

例如:Angular 2 Checkbox Two Way Data Binding。

export class FooComponenet 
   checkbox1 = false; // bind first checkbox
   checkbox2 = false; // another checkbox

<!-- or use (change)="methodName()" -->
<input type="checkbox" [checked]="checkbox1" (change)="checkbox1 = !checkbox1"/>
<input type="checkbox" [checked]="checkbox2" (change)="checkbox2 = !checkbox2"/>

<button [disabled]="!checkbox1 || !checkbox2">Bar</button>

<!-- or this -->
<button [attr.disabled]="!checkbox1 || !checkbox2">Bar</button>

你也可以使用:

模板驱动 (https://angular.io/guide/forms) 或响应式表单 (https://angular.io/guide/reactive-forms) 表单验证器 (https://angular.io/guide/form-validation)

【讨论】:

所以我希望在选中两个框后启用它,这会在您单击检查时禁用该按钮。 你是对的。我纠正了。 :) Bool 逻辑是相反的。【参考方案2】:

在选中复选框之前禁用表单按钮,使用 required 属性告诉 DOM 该字段是必需的,并使用 disabled 属性禁用按钮。 下面是例子

 <form #myform="ngForm">
     <div class="md-input-group md-checkbox md-input--nested-1">
        <input type="checkbox" class="md-input md-checkbox__input" id="checkboxNested1" name="checkboxNested1" **required**>
          <label style="margin-left: -30px;" class="md-checkbox__label" for="checkboxNested1">
            <p>Checkbox 1</p>
          </label>
        </div>
      <div class="md-input-group md-checkbox md-input--nested-1">
      <input type="checkbox" class="md-input md-checkbox__input" id="checkboxNested1" name="checkboxNested1" required>
      <label style="margin-left: -30px;" class="md-checkbox__label" for="checkboxNested1" >
        <p>Checkbox 2</p>
      </label>
    </div>
     <button class="md-button" md-button color="red" aria-label="delete" [disabled]="!myform.valid">Delete organization</button>

    </form>

【讨论】:

以上是关于除非选中复选框,否则禁用按钮(Angular 7+)?的主要内容,如果未能解决你的问题,请参考以下文章

angular2中带有多个单选按钮的多复选框?

使用 Angular2 启用/禁用复选框字段

禁用或启用复选框已选中事件的提交按钮

如何根据带有闪亮元素的 R Markdown 文档中的条件禁用按钮?

如果选中/取消选中复选框,则启用/禁用提交按钮?

检查两个复选框是不是未选中并禁用按钮