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

Posted 2023-03-13

【中文标题】angular2中带有多个单选按钮的多复选框？

【英文标题】：Multi check box with multiple radio buttons in angular2?

【发布时间】：2017-07-28 14:30:31

【问题描述】：

我有一个复选框 (a)。该复选框具有更多两个依赖项 checkbox(b 和 c) 。使用每个复选框，我有 4 个单选按钮分别处于禁用状态。如果我选中 a，然后分别选中 b 和 c，那么所有选中复选框的单选按钮都应该启用。

我已完成复选框选中部分，但我在启用和禁用单选按钮部分时遇到问题。

我的 Json 就像

public permissionList =   
 [
    
    "catagoryname": "Business Settings",
    "permission": [
      
      "permissionname": "Create",
      "ischecked": false,
      "permissionid": 2,
      "depedency": [
        "depedencyId": 1
      , 
        "depedencyId": 3
      ],
      "relation": 
        "isActive":true,
        "other": false
      
    ,
      
      "permissionname": "Edit",
      "ischecked": false,
      "permissionid": 3,
      "depedency": [
        "depedencyId": 1
      ],
      "relation": 
        "isActive":true,
        "other": false
      
  ,
       
      "permissionname": "Delete",
      "ischecked": false,
      "permissionid": 4,
      "depedency": [
        "depedencyId": 1
      ],
        "relation": 
          "isActive":true,
          "other": false
        
      ,
      
      "permissionname": "View",
      "ischecked": false,
      "permissionid": 1,
        "relation": 
          "isActive":true,
          "other": false
        
      ]
  ,
  
    "catagoryname": "Panic Settings",
    "permission": [
      
      "permissionname": "Create Panic",
      "ischecked": false,
      "permissionid": 6,
      "depedency": [
        "depedencyId": 7
      , 
        "depedencyId": 5
      ],
        "relation": 
          "isActive":true,
          "other": false
        
      ,
      
      "permissionname": "Edit Panic",
      "ischecked": false,
      "permissionid": 7,
      "depedency": [
        "depedencyId": 5
      ],
        "relation": 
          "isActive":true,
          "other": false
         
      ,
      
      "permissionname": "Delete Panic",
      "ischecked": false,
      "permissionid": 8,
      "depedency": [
        "depedencyId": 5
      ],
        "relation": 
          "isActive":true,
          "other": false
        
      ,
      
      "permissionname": "View Panic",
      "ischecked": false,
      "permissionid": 5,
        "relation": 
          "isActive":true,
          "other": false
        
      ]
  ];

和我的观点和剩余代码你可以看到plunker。

由于我是 angular 2 新手，我不明白在这种情况下我应该怎么做。请帮助我克服这个问题。

【问题讨论】：

我在 Plunkr 上试过你的代码，它运行完美，完全符合我的要求，但在 Angular 2 Quickstart 的本地环境中同样不起作用。它只是禁用第一个单选按钮，而不是加载时的整个组..

【参考方案1】：

使用[disabled] 来控制单选按钮是否应该被禁用。

我已经添加到plunker，检查一下。

【讨论】：

我试过了，但为什么我不这样做，它对我不起作用，有没有其他解决方案，每行只有一个单选按钮被禁用，

@Runali 对不起，我不明白你现在想要什么。也许我们可以在这里聊天。 chat.***.com/rooms/137520/…

我没有足够的声望点来聊天，在我的应用程序中它只禁用了每行一个单选按钮

@Runali 好的，那么现在有什么问题？也许您应该在您的问题或此处发布详细信息。

我了解问题出在哪里，我将整个代码发布在 plunker 上，除此之外我什么也没做