отключить переключатель на основе значения другого переключателя - PullRequest
Новая
       0

отключить переключатель на основе значения другого переключателя

0 голосов
/ 06 октября 2018

У меня четыре переключателя (1,2,3,4).3 и 4 переключатели должны быть отключены при выборе 1.Когда выбрано 2, следует снова включить 3 и 4.

Я использую библиотеку для аккордеона, и она использует ng-transclude.Когда страница загружается, я проверяю radiobutton1 по умолчанию.Так что 3 и 4 отключены.Когда я выбрал radiobutton2, 3 и 4 включены.Но когда я снова выбираю radiobutton1, 3 и 4 не отключаются.

Я использую this для проверки $scope переменных, и к $scope добавлена ​​новая переменная с тем же именем под ngTransclude (новая переменная, которая входит в область включения)и есть оригинальная переменная под областью действия контроллера, у которой все еще есть значение ng-model переключателя.

Копия type в transclude по-прежнему 'expense'.Я использую ng-disabled="type!='expense'" и scope.type в transclude все еще '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переключатели), одна под областью контроллера и одна под областью включения.

Это работает, когда я не использую библиотеку для аккордеона.

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

попробуйте этот код.Это будет работать для вашего требования. 

$(document).ready(function() {
				// By Default Disable radio button
				$(".second").attr('disabled', true);
				$(".wrap").css('opacity', '.2'); // This line is used to lightly hide 
          label for disable radio buttons.
				// Disable radio buttons function on Check Disable radio button.
				$("form input:radio").change(function() {
				if ($(this).val() == "Disable") {
				$(".second").attr('checked', false);
				$(".second").attr('disabled', true);
				$(".wrap").css('opacity', '.2');
				}
				// Else Enable radio buttons.
				else {
				$(".second").attr('disabled', false);
				$(".wrap").css('opacity', '1');
				}
				});
				});
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
				h2{
				text-align: center;
				}
				hr{
				margin-bottom: 25px;
				}
				div.container{
				width: 643px;
				margin:50px auto;
				font-family: 'Droid Serif', serif;
				position:relative;
				}
				div.main{
				width: 320px;
				padding: 10px 60px 15px;
				box-shadow: 0 0 10px;
				border-radius: 2px;
				font-size: 13px;
				margin: 0 auto 50px;
				}
				span{
				margin-right: 17px;
				font-size: 15px;
				}
				input[type=radio]{
				margin:10px 10px 0 10px;
				}
				label{
				color: #464646;
				font-size: 15px;
				font-weight: bold;
				}
<!DOCTYPE html>
        <html>
         <head>
         <title>Disable Radio Button in Form Using jQuery</title>
         <!-- Include CSS File Here -->
        <link rel="stylesheet" href="style.css"/>
        <!-- Include JS File Here -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
        </script>
        <script type="text/javascript" src="disable_radio.js"></script>
        </head>
        <body>
        <div class="container">
        <div class="main">
         <h2>Disable Radio Button in Form Using jQuery</h2>
         <form action="#" method="post" id="form">
        <label>Enable / Disable Radio Buttons: </label>
        <input type="radio" name="first" value="Enable" id="enable">
        <span>Enable</span>
        <input type="radio" name="first" value="Disable" id="disable" checked>
        <span>Disable</span>
         <label>Radio Buttons :</label>
         <input type="radio" name="second" class="second" value="Radio 1">
           <span class="wrap">Radio 1</span>
           <input type="radio" name="second" class="second" value="Radio 2">
         <span class="wrap">Radio 2</span>
      <input type="radio" name="second" class="second" value="Radio 3">
      <span class="wrap">Radio 3</span>
      </form>
      </div>
      </div>
      </body>
      </html>
0 голосов
/ 06 октября 2018
Радиокнопка

работает внутри тега формы, поэтому сначала нужно добавить форму и внести некоторые изменения в имя модели ng, см. Это. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...