How do a force a a radio box to be be checked value in jquery mobile?
I think it has to do with class=ui-btn-active.
<input type='radio' name='myradio' id='radio-choice-1' value='1' /><label for='radio-choice-1'>Station 1</label>
<input type='radio' name='myradio' id='radio-choice-2' checked value='2' /><label for='radio-choice-2'>Station 2</label>
<input type='radio' name='myradio' id='radio-choice-3' value='3' /><label for='radio-choice-3'>Station 3</label>
I'm not sure what you mean by 'force' - are you asking how to programatically change the state of a radio button? With jQuery Mobile, you must refresh the radio button after updating it's attribute in order for it's UI to be updated. From the docs:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Also note that with HTML4, boolean attributes such as disabled and checked take their names as values when enabled. So simply putting in checked is not valid but must be checked='checked' instead.
Related
I create a list of radio button selections, but the problem is that when clicked, they both remain selected, thus not working as a radio button group at all.
I have the same ng-model (a string; 'model') and ng-change for all of them, but the id is different.
<div class="radio-button"
ng-show="vm.forAdmins"
ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)" >
{{role.name}}
</div>
Been wrestling with this for a while now, can't see what I've missed.
Radio button will work as a group if you assign name property to those radio buttons. I was also facing this issue then I realized my mistake.
<div class="radio-button" ng-show="vm.forAdmins" ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)"
name="roles" >
{{role.name}}
</div>
Try assigning a name attribute to your radio button. name groups the radio button. For example :
<input type="radio" name="someRadio" id="radioOne" />
<input type="radio" name="someRadio" id="radioTwo" />
Now only one is selected at a time.
I tried many answers here at Stackoverflow, but none of them working:
<form ng-submit="runIt(cars)">
<input type="radio" ng-model="cars.erp" value="Toyota" ng-required="!cars.erp">Toyota
<br>
<input type="radio" ng-model="cars.erp" value="Nissan" ng-required="!cars.erp">Nissan
<br>
<input type="radio" ng-model="cars.erp" value="Honda" ng-required="!cars.erp">Honda
<br>
<input type="radio" ng-model="cars.erp" value="Other" ng-required="!cars.erp">Other
<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="!cars.other">
<br>
<input type="submit">
</form>
It all starts working only after typing a value in Other. Apparently, this is due to hidden input, but this is how it should work:
A value must be submitted,
If Other selected, value must be typed.
Here's the fiddle: http://jsfiddle.net/ADukg/17426/
To reproduce:
Run
Select Toyota
Click Submit
See Console in Inspect
The reason for the specific error you're getting of "invalid form control with name='' is not focusable" is because the browser wants to focus on the form element that is required(the text input), but the element is not visible.
<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="!cars.other">
You're saying that the text field is only required if cars.other evaluates to false. In other words, you're saying that the text field is required whenever it isn't filled out. What you actually want is for the text field to be required if cars.erp is set to other.
<input type="text" ng-model="cars.other" ng-show="cars.erp=='Other'" ng-required="cars.erp=='Other'">
Your text field's ng-model is cars.other and then you are checking for ng-required="!cars.other" which isn't right. You are requiring the text field with it self. Instead it should be dependent on the value of the radio button. Something like ng-required="cars.erp=='Other'".
I have updated the JSFiddle here -> http://jsfiddle.net/d0o29hb2/3/. Hope this helps.
I have a text box and two radio button controls with yes or no value. If I click on Yes, the text box should be enable and it should be disabled on No selection. I have used ng-disabled property.
But, if user selects No, saves the file and reopens it, the text box is getting enabled again. Is there a way to save the text box state?
I have tried using disabled="" on textbox. but if user selects yes, enters some value and saves the files, the textbox is getting disabled again. if user selects Yes, the textbox should not be disabled till he selects No
I am talking about index.html file.
Below is my chunk of code:
<input type="radio" name="something" value="1" ng-model="checkboxSelection"/>Checkbox 1
<input type="radio" name="something" value="2" ng-model="checkboxSelection"/> Checkbox 2
<input type="text" ng-model="somevalue" name="somevalue" ng-disabled="checkboxSelection=='2'"/>
try this
<input type="checkbox" ng-click="disable = !disable">
<input type="text" ng-disabled='disable'/>
If you want to clear the value of the input after check no, use a function in you're controller
<input type="radio" ng-model="disable_input" ng-value="true" />
<input type="radio" ng-model="disable_input" ng-value="false" />
<input type="text" ng-disabled="disable_input" />
I'm not sure if you want to use and input or textarea as your "textbox" but all you would need to do to make it a textarea instead is use the ng-disabled in the last input element in a textarea instead.
This works (the button is checked by default):
<input type="radio" name="xyz" ng-model="formData.foo" ng-checked="true" value="bar">
This doesn't work (the button is not checked by default):
<input uniform type="radio" name="xyz" ng-model="formData.foo" ng-checked="true" value="bar">
What's the problem?
EDIT:
This works (changed ng-checked to checked):
<input uniform type="radio" name="xyz" ng-model="formData.foo" checked="true" value="bar">
Is this a proper way of doing things like this?
EDIT2:
I'd prefer to have the ng-checked attribute, as this would allow me to evaluate expressions.
You have to check radio inside the controller.
$scope.formData.foo = 'bar';
According to AngularJS docs, ng-checked argument is not applicable on radio type input tag.
I created this simple example: http://jsfiddle.net/5Bh59/.
If you switch between AngularJS 1.2.1 and 1.1.1, you'll see the radio buttons don't work properly in either version. If you watch the radio button's $dirty field, 1) for version 1.1.1, it will only be set when the first button is clicked, and 2) for version 1.2.1, it will only be set when the last button is clicked.
I read this answer: AngularJS Radio group not setting $dirty on field but I don't really understand the answer. Not only that but the fiddler example demonstrates the same behavior.
So, is this a bug in AngularJS and how can I work around it?
You either need to give each radio button input a different name, or you need to wrap each radio button in an ng-form (each of which have a different name). If you use two inputs with the same name in the same form, only the last one will be bound to the property on the FormController. If you use different names, then each input will have its own property on the FormController.
Example with different names for each radio button:
http://jsfiddle.net/BEU3V/
<form name="form" novalidate>
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.myRadio1.$dirty}}<br />
Field1 $dirty: {{form.myRadio2.$dirty}}<br />
Value: {{myRadio}}
</form>
Example wrapping with ng-form:
http://jsfiddle.net/39Rrm/1/
<form name="form" novalidate>
<ng-form name="form1">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
</ng-form>
<ng-form name="form2">
<input type="radio"
name="myRadio"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Field1 $dirty: {{form.form1.myRadio.$dirty}}<br />
Field2 $dirty: {{form.form2.myRadio.$dirty}}<br />
Value: {{myRadio}}
</form>
If you'd like a single check for the radio group, you can wrap all the radio buttons in their own ng-form and call it something like name="radioGroup".
http://jsfiddle.net/6VVBL/
<form name="form" novalidate>
<ng-form name="radioGroup">
<input type="radio"
name="myRadio1"
ng-model="myRadio"
ng-click=""
value="Rejected"
required>Rejected<br />
<input type="radio"
name="myRadio2"
ng-model="myRadio"
ng-click=""
value="Approved"
required>Approved<br />
</ng-form>
Form $dirty: {{form.$dirty}}<br />
Group $valid: {{form.radioGroup.$valid}}<br />
Group $dirty: {{form.radioGroup.$dirty}}<br />
Value: {{myRadio}}
</form>
This answer is related but perhaps not exactly applicable, but after finding and reading this item I felt it valuable to provide, and I don't have enough points to just comment on an answer (which I thought would have been a more appropriate way to respond).
My issue was that I wanted to show a required error (using ng-messages) but when you tabbed through / past the radio button group $touched didn't turn true unless you shift-tabbed back from the next UI element back to the last radio button of the group. (When my form renders the radio buttons are not set - I'm wanting the user to make a selection and not rely on the user accepting a default.)
Here's my code:
<div class="form-group" ng-class="{'has-error': pet.genderId.$invalid && pet.genderId.$touched}">
<label class="control-label">
What is your pet's gender?
<span ng-messages="pet.genderId.$error" ng-show="pet.genderId.$invalid && pet.genderId.$touched">
<span ng-message="required">(required)</span>
</span>
</label>
<div>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="1" required ng-blur="pet.genderId.$setTouched();" />Male</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="2" required ng-blur="pet.genderId.$setTouched();" />Female</label>
<label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="3" required ng-blur="pet.genderId.$setTouched();" />Not sure</label>
</div>
</div>
The 'magic' was adding the ng-blur attribute to set 'touched' myself even if only the first radio button was tabbed past.
You may be able to employ a similar tactic for $dirty by calling $setDirty() in the ng-changed attribute.