帶有禁用功能的角度表格和HTML複選框在剩餘選中框中

目標是在勾選一個框時禁用所有複選框。當我在下面使用這個jQuery代碼時，出於某種原因，它不能像在提到的here提到的SO解決方案中那樣工作。帶有禁用功能的角度表格和HTML複選框在剩餘選中框中

在這個例子中，我使用MVC控制器在nodejs和angular stack中填充一個表。當此表顯示時，表中打印的每個名稱旁邊都有一個複選框。 是否有解決方案，當選中一個複選框時，正確禁用在此角度腳本中填充的複選框？

HTML

<table> 
<thead> 
    <th>Names</th> 
</thead> 
<tr dir-paginate="x in names | filter:search | itemsPerPage:8"> 
    <div class="checkbox" id="nameList"> 
     <td><label><input type="checkbox" name="name" value={{x.name}}> {{ x.name }}</label></td> 
    </div> 
</tr> 
</table>

$(document).ready(function(){ 
$('#nameList input[type=checkbox]').change(function(){ 
    if($(this).is(':checked')){ 
     $('#nameList').find(':checkbox').not($(this)).attr('disabled',true); 
    }else{ 
     $('#nameList').find(':checkbox').attr('disabled',false); 
    } 
    }); 
})

來源

2017-04-07 JnL

爲什麼你使用jquery來處理所有這些，如果你使用的是角？ – kaushlendras

由於您使用循環來創建複選框，因此這將很難。你可以使用'ng-change'或'ng-click'結合'ng-disabled'，但問題是它會禁用你所有的複選框，包括選中的複選框。 – JkAlombro

嘗試使用NG-變化的角度NG-模型的指令來處理這些事情。

這裏請參閱https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D。

來源

2017-04-07 05:47:39 kaushlendras

因爲他正在使用循環來填充表格，所以很難通過ng-model來跟蹤各個複選框 – JkAlombro

@JKAlombro你能否提供一個如何使用ng-change指令來禁用複選框的例子？ – JnL

@JMM哦對不起，我遲了2天。當然，我可以，但我會張貼它來回答，因爲它有點長。 – JkAlombro

下面介紹如何使用angular ng-change和ng-disabled。 ng-change執行，另一方面當有一些變化是輸入字段做（在這種情況下，檢查和取消選中該複選框）的角度功能，ng-disabled禁用輸入字段，如果條件爲true

在你的模板，把這些你的複選框輸入標籤

<tr dir-paginate="x in names | filter:search | itemsPerPage:8"> 
    <div class="checkbox" id="nameList"> 
     <td> 
      <label> 
      <input type="checkbox" ng-disabled="isCBdisabled" ng-model="yourCBmodel" ng-change="cbChanged()" name="name" value={{x.name}}> 
       {{ x.name }} 
      </label> 
     </td> 
    </div> 
</tr>

那麼你的角度控制器上，把這個

$scope.isCBdisabled = false; 

$scope.cbChanged = function() { 
    $scope.isCBdisabled = true; 
};

所以這是我做什麼，我的控制器上，我初始化scopeisCBdisabled爲false，以便它不會立即禁用複選框。然後製作了一個功能cbChanged()，將isCBdisabled更改爲true，導致複選框被禁用，因爲ng-disabled。但是，就像我說過的那樣，它會禁用所有複選框，包括所選的複選框，這是另一個頭腦風暴。

來源

2017-04-10 00:48:50 JkAlombro

帶有禁用功能的角度表格和HTML複選框在剩餘選中框中

回答

相關問題