Сделать DIV отключить кнопку мыши радио

<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>

Hi.I есть проблема в отключении div.I есть два DIV (в Div1 и div2) .Если я нажимаю AllSku в див1 затем div2 должен полностью нетрудоспособным .Similarly если я нажимаю AllSku в div2 затем div1 должен быть disabled.ng-отключение не работает с div.Please помощью :)

Демо: https://plnkr.co/edit/ZLGKv5zMTsMdPetHlcXs?p=preview

источник

2017-02-16 Anusha Bayya

нг-отключено по умолчанию работает только в элементах формы вы можете использовать директивы для отключения каждого входа в div [Plunker] (http://stackoverflow.com/a/25822878/328364 1) – amansinghgusain

@amansinghgusain no ng-disabled не работает –

yes ng-disabled не работает в div, потому что он не является элементом формы – amansinghgusain

Попробуйте это:

<fieldset ng-disabled="formData.percenSku == 'allSku'"> на вершине <div> элемента в качестве обертки.

DEMO

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 
});

<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>

источник

2017-02-16 08:11:51

Вам нужно обернуть элементы DIV внутри какого-либо элемента, <fieldset> является хороший выбор. Plunker здесь или выполните сценарий ниже.

// 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; 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
    <head> 
 
    <script data-require="[email protected]" 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" /> 
 

 
\t \t \t \t \t \t \t \t All SKUs 
 
\t \t \t \t \t \t \t </label> 
 
      <label class="checkbox-inline"> 
 
      <input type="radio" name="chooseone" value="specificSku" ng-model="formData.value" /> 
 

 
\t \t \t \t \t \t \t \t Specific SKUs 
 
\t \t \t \t \t \t \t </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 
 
\t \t \t \t \t \t \t </label> 
 
      <label class="checkbox-inline"> 
 
      <input type="radio" name="chooseone1" value="specificSku" ng-model="formData.percenSku" /> 
 
Specific SKUs 
 
\t \t \t \t \t \t \t </label> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 
    </body> 
 

 
</html>

источник

2017-02-16 08:07:26 nivas

Вы можете добавить отключить эффект с помощью CSS ниже:

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

Тогда все, что вам нужно, это добавить класс к метке, используя директиву нг-класса. Напр.

<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.

Пожалуйста, сообщите, если это поможет!

источник

2017-02-16 08:08:30

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; 
      } 
     } 

    };

Я дал Див идентификатор и извлекаться элементы и отключить каждый HTML input.It работал :)

источник

2017-02-16 10:03:27

Сделать DIV отключить кнопку мыши радио

ответ

Смежные вопросы