Désactiver les autres cases à cocher avec [désactivé] dans Angulaire 2
Je veux que les autres cases à cocher est désactivée lorsque on est sélectionné. Je le fais par
<span class="input-group-addon">
<input type="checkbox" name="ssn" (change)="checkBox[0].checked=!checkBox[0].checked">
</span>
<span class="input-group-addon">
<label>{{checkBox[0].label}}</label>
</span>
<input [(ngModel)]="ssn" type="password" name="ssnText" class="form-control" placeholder=" ">
J'ai 6 cases qui regarder comme ci-dessus. Cependant, je veux seulement être en mesure de sélectionner de 1 case et NON plusieurs comme il est en train de faire maintenant.
Dans mon composant:
ssn:string;
userId:string;
lastName:string;
office:string;
role:string;
checkIfOthersAreSelected:boolean
checkBox = [
{label: 'SSN', name:'ssn', checked:false},
{label: 'Last Name', name:'lastName', checked:false},
{label: 'Role', name:'role', checked:false},
{label: 'UserId', name:'userId', checked:false},
{label: 'Office', name:'office', checked:false},
{label: ' Include Subordinates', name:'subordinates', checked:false}
];
bouton en html
<button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button>
searchMethod
public search(checkboxArray) {
let ssn = checkboxArray[0];
let lastName=checkboxArray[1];
let role=checkboxArray[2];
let userId= checkboxArray[3];
let office=checkboxArray[4];
if(ssn.checked == true){
console.log("What is checked: "+ssn.name+" input: "+this.ssn);
this.user = this._searchService.getUserBySSN(this.ssn);
}
if(userId.checked == true){
console.log("What is checked: "+userId.name+" input: "+this.userId);
this.user = this._searchService.getUserById(this.userId);
}
l'événement n'est pas booléenne. Essayez comme première ligne de votre checkSelected gestionnaire pour mettre la console.log(journal des événements). De cette façon, vous serez en mesure d'inspecter les propriétés de l'objet.
Ces cases à cocher réitéré dans ngFor ou?
aucune de ces ne sont pas en
J'ai mis à jour mon code. Toujours le même problème.
J'ai publié un bounty
Ces cases à cocher réitéré dans ngFor ou?
aucune de ces ne sont pas en
*ngFor
j'ai mis à jour mon code.J'ai mis à jour mon code. Toujours le même problème.
J'ai publié un bounty
OriginalL'auteur Drew1208 | 2017-02-17
Vous devez vous connecter pour publier un commentaire.
Cela devrait le faire. Bien sûr, vous pourriez aussi le faire avec d'itération si vous le souhaitez, mais puisque vous avez tous la case séparément, je vais le faire ici. Nous allons créer une nouvelle méthode
checkSelected
qui prend l'étiquette de la case de valeur qui est déclenché par(change)
événement. Nous avons mis désactiver pour les cases à cocher lors de lachecked
est défini comme vraiEt dans votre TS, nous allons effectuer une itération de la matrice, et vérifiez l'étiquette correspond à celui choisi. Pour les autres cases à cocher, nous allons basculer la valeur booléenne
checked
de vrai, tout le choisi case reste faux.Lorsque vous décochez la case, il reste encore faux, et les autres sont faux!
Et il ya go, le tout fait! 🙂 Voici une Plunker.
Cela a fonctionné, MAIS je ne sais pas qui est cochée. Veuillez voir mon post mis à jour. Je vous remercie pour vos efforts. Maintenant, celui qui est sélectionné est le seul qui ne veut pas imprimer dans la console.
Je viens de changer les valeurs dans la méthode et ça marche, merci
Ok super! Ouais, vous avez besoin à la recherche de la case de valeur qui est faux. Semble un peu en arrière, peut-être, mais j'ai utilisé la valeur booléenne que vous aviez mis dans votre tableau, mais il peut-être se sent un peu bizarre à la recherche de la valeur qui est faux 🙂
Je souhaite vraiment que je pourrais avoir utilisé des boutons radio. Savez-vous d'une manière que je peux utiliser votre méthode, mais avec des boutons radio? Si je fais un bouton radio je ne peux pas le désélectionner. Très ennuyeux... je veux que l'utilisateur soit en mesure de vérifier une radio de la case et il décoche les autres. De cette façon, vous devez décocher pour ouvrir les autres.
OriginalL'auteur AJT_82
Changer de
Dans votre cas
OriginalL'auteur Mirza Ali Baig
Pour moi, c'EST un cas pour la radio boutons à la place des cases à cocher. Et dans ce cas, je suis en utilisant cette radio boutons de @angulaire/matériel. Le programme d'installation de matériel est un peu difficile, mais les composants sont en vaut la peine.
ReactiveFormsModule
importésOh, la
ReactiveFormsModule
est toujours sur ma liste pour l'apprendre. Les balises html doit être de configuration, voir la commencer.OriginalL'auteur Myonara
Pourquoi ne pas simplement utiliser un groupe de boutons radio à la place? Cette fonctionnalité peut être obtenue sans utiliser de JavaScript (si j'ai bien compris vos besoins correctement).
Jetez un oeil à des boutons radio
*ngFor
mais je ne peut pas dans ce cas.Comme indiqué ci-dessus: ajouter un bouton radio "none of the above", alors c'est votre désélectionner.
OriginalL'auteur Danny Bullis
Qu'en essayant de l'
<select>
liste déroulante avec un 'none' option, qui permet à l'utilisateur de débarrasser efficacement leur recherche sélectionné article?OriginalL'auteur Danny Bullis
OriginalL'auteur Sachin Khartode