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.
Related
Stackblitz
I am trying to find the id associated with the name I select using the radio button. Any help?
<form #filterForm="ngForm" (ngSubmit)="addFilter(filterForm)" autocomplete="off">
<div class="row">
<div class="col-12" style="border: 1px solid red">
<div *ngFor="let x of countryArray">
<label for="{{x.name}}"> {{x.name}} </label>
<input type="radio" id="{{x.name}}" value="{{x.name}}" name="name" [(ngModel)]='selected'>
</div>
</div>
<hr />
<button type="submit">SAVE</button>
</div>
</form>
try to declare a property and set the value on model change event
<div *ngFor="let x of countryArray">
<label for="{{x.name}}"> {{x.name}} </label>
<input type="radio" id="{{x.name}}" value="{{x.name}}" name="name"
ngModel (ngModelChange)="selectedValue = x">
</div>
demo 🚀🚀
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 am building the form which has SELECT and few inputs. The part of it looks like this (only for Monday example, there will be 7 days..):
<div class="row">
<div class="col-md-3">
<div class="form-group mb-md">
<input type="text" name="1[day]" class="form-control text-bold" value="Monday" readonly>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<select class="form-control input-md mb-md" name="1[open]">
<option value="1" selected>Open</option>
<option value="0">Closed</option>
</select>
</div>
</div>
<!-- Working Hours -->
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[start]" value="08:00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[end]" value="22:00">
</div>
</div>
<!-- Booking Hours -->
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[from]" value="08:00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<input type="text" class="form-control time" name="1[to]" value="22:00">
</div>
</div>
</div>
I want to make time fields with same name start as SELECT field name start react to SELECT change. If value is 0 then all fields with same name start get attribute disabled.
So far i made this function, however i don't know hot to determine changed field name and correspondingly take actions against other fields.
$("select[name$='[open]']").change(function() {
if ($(this).val() == 0) {
// Should disable all input fields with same name as SELECT
} else if ($(this).val() == 1) {
// Should enable all input fields with same name as SELECT
}
});
Not sure if this is what you are attempting to achieve.
Please try below code.
$("select[name$='[open]']").change(function() {
var num = $(this).attr("name").replace("[open]",'');
var elems = $( "input[name^='"+num+"']");
if ($(this).val() == 0) {
// Should disable all input fields with same name as SELECT
elems.prop('disabled',true);
} else if ($(this).val() == 1) {
// Should enable all input fields with same name as SELECT
elems.prop('disabled',false);
}
});
Check the working fiddle here.
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>