如果在 angularjs ng-repeat 中单击其中任何一个，则禁用所有单选按钮

Question

我想在这里做的是，我在一个表单中有一个 ng-repeat，如果我单击任何一个对应的输入按钮，所有按钮都会被禁用

<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
        <hr>
            <p>Q. {{question.questionText}}</p>
            <form >
                <div ng-repeat=" option in question.questionOptions track by $index">   
                    <label>
                        <input name="options" type="radio" value="$index" ng-click="sinSurCtrl.questionId=question.questionId; sinSurCtrl.answer=$index+1; sinSurCtrl.createAnswer()" onclick="this.disabled = true">
                        <span> {{option}} {{$index+1}} {{question.questionId}} </span>
                    </label>
                </div>
            </form>
        </div>

这是视图-

如您所见，如果我 select 这些选项中的任何一个都被禁用，但我想做的是，如果我尝试任何选项，那么对应于同一问题的选项将被禁用。例如- 在第三季度。哪个演说家更好？如果我选择选项 (a) 然后它得到 selected 然后自动 bot 选项 (a) 和 (b) 被禁用。

注意-请尝试将解决方案完全保留在 angularjs 中，或者如果您想使用负担得起的 javascript 数量，请避免使用 jQuery 等外部库（我知道在他的感觉中没有人会处理同时使用 jQuery 和 angular 的麻烦，但为了举例，我已经包含了它的名称）

Answer 1

在您的控制器上，创建一个函数来检查给定的 questionId 是否已得到回答，如果已回答则 return 为真。在输入标签 ng-disabled 中调用该函数：

<input type="radio" ng-disabled="sinSurCtrl.questionHasAnswer(question.questionId)" ... />

Answer 2

建议的解决方案和一些建议的重构...

首先更改 ng-click 指令以指向 sinSurCtrl 上的新 onOptionButtonClicked 函数，该函数接受两个参数 question 和 index（其中它需要执行它的工作):

<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
  <hr>
  <p>Q. {{question.questionText}}</p>
  <form>
    <div ng-repeat="option in question.questionOptions track by $index">   
      <label>
        <input 
          name="options" 
          type="radio" 
          value="$index"
          ng-click="onOptionButtonClicked(question, $index)"
          ng-disabled="question.disabled">
        <span> {{option}} {{$index+1}} {{question.questionId}} </span>
      </label>
    </div>
  </form>
</div>

另请注意新添加的 ng-disabled="question.disabled" 指令。这是 enable/disable 问题控制机制的一部分。

现在将变量赋值移动到新的 onOptionButtonClicked 函数中。控制器通常是变量赋值的更好位置（比视图），尤其是在同一指令上有多个变量时。

sinSurCtrl.onOptionButtonClicked = onOptionButtonClicked;

function onOptionButtonClicked(question, index){
  sinSurCtrl.questionId=question.questionId; 
  sinSurCtrl.answer=index; 
  sinSurCtrl.createAnswer();
  question.disabled = true; // <--- This is what disables the option buttons
}

这是回答的 question 对象将其 disabled 属性设置为 true 的地方。这与前面提到的 ng-disabled 指令相结合是禁用选项按钮的原因。

如果在 angularjs ng-repeat 中单击其中任何一个，则禁用所有单选按钮

To disable all radio buttons if anyone of them is clicked in angularjs ng-repeat

javascript

angularjs

angularjs-ng-repeat