CODEWITHSUNDEEP
javascriptangularjshtml
jackdaw
jackdaw

Reputation: 2314

How to prevent multiple select in radio button?

I've this code:

<form name="quiz" ng-submit="quiz.answer(selected)">
  <label>
    <input type="radio" ng-model="selected" ng-value="true"> Red
  </label>
  <br/>
  <label>
    <input type="radio" ng-model="selected" ng-value="false"> Green
  </label>
  <br/>
  <label>
    <input type="radio" ng-model="selected" ng-value="false"> Blue
  </label>
  <br/>
  <label>
    <input type="radio" ng-model="selected" ng-value="false"> Yellow
  </label>
  <br/>
  <input type="submit" id="submit" value="Submit" />
</form>

How do I prevent ALL of the false values from being selected at once if I click one?

Upvotes: 0

Views: 6314

Answers (2)

KCFragrance
KCFragrance

Reputation: 158

As per my understanding you want to group the radio buttons such that one is selected at a time you can do it by adding name attribute in each radio button and give same name to all of them. So at time of submit you can get the value of selected variable in submit function call.

   <form name="quiz" ng-submit="quiz.answer(selected)">
         <label>
    <input type="radio" name="quizOption" ng-model="selected" ng-value="true">
    Red
  </label><br/>
  <label>
    <input type="radio" name="quizOption" ng-model="selected" ng-value="false">
    Green
  </label><br/>
  <label>
    <input type="radio" name="quizOption" ng-model="selected" ng-value="false">
    Blue
  </label><br/>
  <label>
    <input type="radio" name="quizOption" ng-model="selected" ng-value="false">
    Yellow
  </label><br/>
  <input type="submit" id="submit" value="Submit" />
</form>

Upvotes: 0

Aaron Averett
Aaron Averett

Reputation: 921

<form name="quiz" ng-submit="quiz.answer(selected)">
  <label>
    <input type="radio" ng-model="selected" ng-value="red">
    Red
  </label><br/>
  <label>
    <input type="radio" ng-model="selected" ng-value="green">
    Green
  </label><br/>
  <label>
    <input type="radio" ng-model="selected" ng-value="blue">
    Blue
  </label><br/>
  <label>
    <input type="radio" ng-model="selected" ng-value="yellow">
    Yellow
  </label><br/>
  <input type="submit" id="submit" value="Submit" />
</form>

Give each of the radio buttons a distinct value.

Upvotes: 2

Related Questions