javascript - 根据其他单选按钮的值禁用单选按钮

Question

我有四个单选按钮 (1,2,3,4)。选择 1 时，应禁用 3 和 4 单选按钮。选择 2 时，应再次启用 3 和 4。

我正在使用 Accordion 库，它使用 ng-transclude。当页面加载时，我默认检查 radiobutton1。所以 3 和 4 被禁用。当我选择 radiobutton2、3 和 4 时启用。但是当我再次选择 radiobutton1 时，3 和 4 并没有被禁用。

我使用 this检查 $scope 变量，在 ngTransclude 下有一个同名附加到 $scope 的新变量(新变量在transclusion) 并且在 Controller 的作用域下有原始变量，它仍然具有单选按钮的 ng-model 值。

transclude下type的副本仍然是'expense'。我使用 ng-disabled="type!='expense'" 并且当我点击时，transclude 下的 scope.type 仍然是 'expense'在另一个单选按钮上。所以单选按钮没有被禁用？

如何让它发挥作用？

 <div class="form-check">
       <input type="radio" ng-model="maintenance_bill_rate_type" value="1">
       <label>Fixed Per Flat</label>
    </div>
    <div class="form-check">
       <input type="radio" ng-model="type" value="2">
       <label>Expenses</label>
    </div>
    <div class="row">
    <div class="col-md-3">
       <label>
       <input type="radio" ng-model="maintenance_bill_rate_type" 
         ng-disabled="type!='expense'"
          value="3">
       </label>
    </div>
    <div class="col-md-3">
       <label>
       <input type="radio" name="optradio" ng- 
        model="maintenance_bill_rate_type" value="4" 
        ng-disabled="type!='expense'" >
       </label>
    </div>

在检查器中，我看到两个 type 变量(用于禁用 3 和 4 单选按钮)，一个在 Controller 范围内，一个在 transclude 范围内。

这在我不使用 Accordion 库时有效。

Answer 1

radio button 在 form 标签内工作，所以你必须先添加 form 并且你必须在 ng-model 名称中做一些更改引用这个。

<form>
   <div class="form-check" >
     <input type="radio" ng-model="radioMain" value="1">
     <label>Fixed Per Flat</label>
   </div>
   <div class="form-check">
     <input type="radio" ng-model="radioMain" value="2">
     <label>Expenses</label>
   </div>
   <div class="row">

     <div class="col-md-3">
       <label>
         <input type="radio" ng-model="maintenance_bill_rate_type" 
            ng-disabled="radioMain==1" value="3">
       </label>
     </div>
     <div class="col-md-3">
       <label>
         <input type="radio" ng-model="maintenance_bill_rate_type" 
         ng-disabled="radioMain==1" value="4">
       </label>
     </div>
  </div>
</form>