Question

我有四个单选按钮（1、2、3、4）。选择1时，应该禁用3和4单选按钮。选择2时，应再次启用3和4。

我正在使用一个手风琴库，它使用ng-transclude。页面加载后，默认情况下会选中radiobutton1。因此3和4被禁用。当我选择单选按钮2时，将启用3和4。但是当我再次选择单选按钮1时，不会禁用3和4。

我使用this检查$scope变量，并且在$scope下有一个同名的新变量附加在ngTransclude上（新变量在转换范围内），并且控制器范围内还有原始变量，该变量仍然具有单选按钮的ng-model值。

type下的transclude的副本仍为'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个单选按钮），一个在控制器作用域下，一个在超越作用域下。

当我不使用手风琴库时，此方法有效。

Answer 1

单选按钮在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>

Answer 2

尝试此代码。这将满足您的要求。

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

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

2 个答案: