Question

<div class="col-md-3">
    <div class="form">
        <label class="checkbox-inline"> <input type="radio"
        name="chooseone" value="allSku" ng-model="formData.value">
        All SKUs
        </label> <label class="checkbox-inline"> <input type="radio"
        name="chooseone" value="specificSku" ng-model="formData.value">
        Specific SKUs
        </label>
    </div>
</div>
<label>Div2:</label>        
<div class="col-md-3">
    <div class="form">
        <label class="checkbox-inline"> <input type="radio"
        name="chooseone1" value="allSku"
        ng-model="formData.percenSku"> All SKUs
        </label> <label class="checkbox-inline"> <input type="radio"
        name="chooseone1" value="specificSku"
        ng-model="formData.percenSku"> Specific SKUs
        </label>
    </div>

嗨。我在禁用div时遇到问题。我有两个div（div1和div2）。如果我在div1中单击AllSku，那么div2应该完全禁用。同样如果我在div2中单击AllSku然后div1应该被禁用.ng-disable不使用div.Please help :)。

演示：https://plnkr.co/edit/ZLGKv5zMTsMdPetHlcXs?p=preview

Answer 1

试试这个：

<fieldset ng-disabled="formData.percenSku == 'allSku'">在<div>元素的顶部作为包装。

<强>样本

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<label>Div1:</label>      
<fieldset ng-disabled="formData.percenSku == 'allSku'">
  <div class="col-md-3">
    <div class="form">
        <label class="checkbox-inline"> <input type="radio"
        name="chooseone" value="allSku" ng-model="formData.value">
        All SKUs
        </label> <label class="checkbox-inline"> <input type="radio"
        name="chooseone" value="specificSku" ng-model="formData.value">
        Specific SKUs
        </label>
    </div>
</div>
</fieldset>
<label>Div2:</label>   
<fieldset ng-disabled="formData.value == 'allSku'">     
<div class="col-md-3">
    <div class="form">
        <label class="checkbox-inline"> <input type="radio"
        name="chooseone1" value="allSku"
        ng-model="formData.percenSku"> All SKUs
        </label> <label class="checkbox-inline"> <input type="radio"
        name="chooseone1" value="specificSku"
        ng-model="formData.percenSku"> Specific SKUs
        </label>
    </div>
    </div>
</fieldset>
</div>

＆＃13;

Answer 2

您需要将div元素包含在某个元素中，<fieldset>是一个不错的选择。 Plunker此处或在脚本下方运行。

＆＃13;

// Code goes here

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
  $scope.formData= {};
  $scope.formData.value = null;
  $scope.formData.percenSku = null;
  
  $scope.resetDis = function () {
    $scope.formData.value = null;
  }
  $scope.resetDis2 = function () {
    $scope.formData.percenSku = null;
  }
});

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <label>Div1:</label> {{formData.value}} <button ng-click="resetDis()">Reset Div1</button>
    <br /><br />
    <fieldset ng-disabled="formData.percenSku">
      <div class="col-md-3">
        <div class="form">
          <label class="checkbox-inline">
            <input type="radio" name="chooseone" value="allSku" ng-model="formData.value" />

								All SKUs
							</label>
          <label class="checkbox-inline">
            <input type="radio" name="chooseone" value="specificSku" ng-model="formData.value" />

								Specific SKUs
							</label>
        </div>
      </div>
    </fieldset>
    <br />
    <label>Div2:</label> {{formData.percenSku}} <button ng-click="resetDis2()">Reset Div2</button>
    <br /><br />
    <fieldset ng-disabled="formData.value">
      <div class="col-md-3">
        <div class="form">
          <label class="checkbox-inline">
            <input type="radio" name="chooseone1" value="allSku" ng-model="formData.percenSku" />
 All SKUs
							</label>
          <label class="checkbox-inline">
            <input type="radio" name="chooseone1" value="specificSku" ng-model="formData.percenSku" />
 Specific SKUs
							</label>
        </div>
      </div>
    </fieldset>
  </body>

</html>

＆＃13;

Answer 3

您可以使用下面的css添加禁用效果：

.disableEffect {
    pointer-events: none;
    opacity: 0.5;
}

然后，您只需使用ng-class指令将类添加到标签中。例如，

<label class="checkbox-inline" 
       ng-class="{'disableEffect': formData.value == 'allSku'}">
       <input type="radio" name="chooseone1" value="allSku" ng-model="formData.percenSku"> All SKUs

这会禁用标签。请注意pointer-events: none;无法在IE中使用。

请知道它是否有帮助！

Answer 4

scope.disableUnitsDiv = function(type) {        
        var el = document.getElementById("units");
        var all = el.getElementsByTagName('input');
        if(type === "allSku") {
            scope.formData.value = "";
            for (var i = 0; i < all.length; i++) {
                all[i].disabled = true;
            }
        }
        else {
            for (var i = 0; i < all.length; i++) {
                all[i].disabled = false;
            }
        }

    };

我给了div id并检索了元素并禁用了每个html输入。它工作了:)）

单击单选按钮进行div禁用

4 个答案: