I am using the below code to check my checkbox in handlebars.
<fieldset>
<div class="control-group">
<div class="control-label">{{#t "display_creators_name"}}Display Creator's name{{/t}}</div>
<div class="controls">
<label class="checkbox" for="creators_name">
{{checkbox "creators_name"
checked=creators_name}}
{{#t "allow_creators_name"}}{{/t}}
</label>
</div>
</div>
</fieldset>
But the checkbox is not checked.
Can someone please help me for the same.
Related
I have multiple checkboxes for a question.Atleast one checkbox needs to be selected.If none of the checkboxes get selected form should through validation error.Did i miss anything. Any ideas on how I would be able to achieve this behaviour?
My .JS code:
$scope.onCheckBoxSelected=function(){
var flag=false;
for(var key in selectedOptions){
console.log('Key -' +key +' val- '+selectedOptions[key]);
if(selectedOptions[key]){
flag=true;
}
}
if(!flag){
selectedOptions=undefined;
}
};
below is my html code :
<div class="grid">
<div class="col flex-10 mandatoryField" ng-class="{error: (!selectedOptions && formMissingFields)}">Hello please select atleast one</div>
<div class="col flex-2">
</div>
<div class="col flex-5">
<div style="padding-top: 2px">
<input type="checkbox" name="apple" title="Select type" value="apple" ng-model="apple" ng-change="onCheckBoxSelected()">apple
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="orange" title="Select type" value="orange" ng-model="orange" ng-change="onCheckBoxSelected()">orange
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="banana" title="Select type" value="banana" ng-model="banana" ng-change="onCheckBoxSelected()">banana
</input>
</div>
</div>
</div>
You can keep it simpler, without the need of the ngChange event.
<div ng-class="{error: !apple && !orange && !banana">Hello please select atleast one</div>
It's best practice to use the AngularJS forms for checkbox validation - it will also help you if you intend on extending your form. You will have to refactor your code to use this functionality.
<ng-form name="myForm">
<span style="color:red;" ng-show="myForm.$invalid">Please select one</span>
<br />
<!-- your checkbox values will be in "choices" -->
<p ng-repeat="choice in choices">
<label class="checkbox" for="{{choice.id}}">
<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" ng-required="value.length==0" /> {{choice.label}}
</label>
</p>
<input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
</ng-form>
See this fiddle - note that it uses underscore.js. Also, this question may help.
I want to select one radio button out of two radio button using Javascript here is my html code I have
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">Feel Of The Cards : </label>
<div class="col-sm-6">
<input type="radio" value="NonEmbossed" name="feel_of_card" /> Non Embossed/Smooth Finished<br>
<input type="radio" value="Embossed" name="feel_of_card1" /> Embossed/Linen Finished/Textured Cards
</div>
</div>
</div>
I want to make a separate function in which a one radio button will be selected out of two radio button?
what is the possible way to write javascript function ?
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">Feel Of The Cards : </label>
<div class="col-sm-6">
<input id="_1234" type="radio" value="NonEmbossed" name="feel_of_card" /> Non Embossed/Smooth Finished<br>
<input id="_1235" type="radio" value="Embossed" name="feel_of_card" /> Embossed/Linen Finished/Textured Cards</div>
</div>
</div>
Why do you use all instead of id value?
Also do not mix CSS syntax (# for identifier) with native JS
Native JS solution:
document.getElementById("_1234").checked = true;
JQuery solution:
$("#_1234").prop("checked", true);
You don't need JavaScript to do that. Just give same name to both checkboxes
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6">Feel Of The Cards : </label>
<div class="col-sm-6">
<input type="radio" value="NonEmbossed" name="feel_of_card" />
Non Embossed/Smooth Finished<br />
<input type="radio" value="Embossed" name="feel_of_card" />
Embossed/Linen Finished/Textured Cards
</div>
</div>
</div>
I have form with input fields, radio buttons, and select boxes.
How I can show all inputted data on another page or on modal window of this page?
For radio boxes, I want to show text inside getWord, but the form has 2 languages.
<div class="form-group">
<div class="col-sm-offset-1">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="newpat" ng-model="isNewpat" value="true"><span>{{getWord('New')}}</span></label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="existpat" ng-model="isNewpat" value="false"><span>{{getWord('Exist')}}</span></label>
</div>
</div>
</div>
I also want to be able to see the information inputted in input fields and chosen datepicker.
For example, I used this, but it did not work:
<div class="modalwindow text-center">
<h1>{{getWord.appoitmentmessage}}</h1>
<p>{{message}}</p>
<div>{{user.name}}</div>
<div>{{user.email}}</div>
</div>
As much I understand your question. I think this will work for you. If you want to show value of radio-box selection in modal. Please elaborate more so in can help further
Change this
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="newpat" ng-model="isNewpat" value="New"><span>New</span></label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" class="radiobox" name="existpat" ng-model="isNewpat" value="Exist"><span>Exist</span></label>
</div>
And this Also
<div class="modalwindow text-center">
<h1>{{isNewpat}}</h1>
<p>{{message}}</p>
<div>{{user.name}}</div>
<div>{{user.email}}</div>
</div>
how can i make checkbox disable when i choose an item from comboboxes. forexample if i choose "ABONE", angular will make abone checkbox disable.
Note(example): DefinitionType : ABONE
<div class="row">
<div class="form-group">
<label class="control-label col-md-2">Tanım Tipi<sup>*</sup></label>
<div class="col-md-3">
<select class="form-control" placeholder="Tanım Tipi" ng-options="field.value for field in DefinitionTypes" ng-model="DefinitionType" required></select>
</div>
</div>
</div><br />
Ekstra Tanım Tipi
<div class="checkboxinsameline" ng-repeat="item in DefinitionTypes">
<label>
<input type="checkbox" name="item.value" ng-click="DefinitionTypesChecked(item.id)" > {{item.value}}
</label>
</div>
</div>
</div>
</div><br />
You will have to add this attribute on your input :
ng-disabled="item.value == DefinitionType.value"
This will disable your input when the value of your input will be equals to the value of your select model.
I'm using the Bootstrap Toggle plugin to change my checkboxes into toggle switches. I'm also using AngularJS. When I set the checked value, it toggles fine. But when I don't, it does not toggle. You can see in the link to my results, that checkboxes are checked, but they are not toggling. Does anyone know why it's not binding using Angular?
HTML:
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Working Toggle </span>
</label>
<div class="col-sm-5">
<input id="toggle-one" checked type="checkbox">
</div>
</div>
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Color Review Check</span>
</label>
<div class="col-sm-5">
<input type="checkbox" class="pull-right" ng-model="colorReview" >
</div>
</div>
<div class="form-group">
<label class="col-sm-7 control-label">
<span>Type Review Check</span>
</label>
<div class="col-sm-5">
<input type="checkbox" class="pull-right" ng-model="typeReview">
</div>
</div>
<div class="form-group">
<label for=color-review" class="col-sm-7 control-label">
<span>Color Review </span>
</label>
<div class="col-sm-5">
<input type="checkbox" id="color-review" class="pull-right" ng-model="colorReview" >
</div>
</div>
<div class="form-group">
<label for="type-review" class="col-sm-7 control-label">
<span>Type Review </span>
</label>
<div class="col-sm-5">
<input type="checkbox" id="type-review" class="pull-right" ng-model="typeReview">
</div>
Javascript:
// Set The Review Checkboxes To Toggle Switches
$('#color-review').bootstrapToggle();
$('#type-review').bootstrapToggle();
$('#toggle-one').bootstrapToggle();
Results: Here is a link to a picture of my results:
Results
Have you taken a look at https://github.com/cgarvis/angular-toggle-switch?
$scope.topics:[{"on":true,"offLabel":"Off","onLabel":"On"}];
<div ng-repeat="t in topics">
<toggle-switch model="t.switch.on" on-label="t.switch.onLabel" off-label="t.switch.offLabel" switched="doSomethingToggle(t, $index)"></toggle-switch>
</div>