Impossible de changer RadioButtonPour la sélection via JQuery

Question

Je travaille sur le code pour déterminer s'il faut afficher ou non une section d'informations de contact. Pour ce faire, j'implémente le html-helper de RadioButtonFor avec une valeur booléenne pour le modèle de vue MVC dans Razor. Lorsque la page est chargée, j'ai besoin de changer de la valeur par défaut, de ne pas l'afficher, pour l'afficher si la valeur du modèle HasConflicts est true (vrai). J'essaye d'employer JQuery pour faire ceci au chargement de page, mais l'option choisie ne changera pas.

Voici la section de rasoir

<div class="left-col" id="noConflict"> 
    @Html.RadioButtonFor(m => m.HasConflicts, "false") <strong><em>No Conflict of Interest exists at this time</em></strong> 
</div> 
<div class="right-col" id="yesConflict"> 
    @Html.RadioButtonFor(m => m.HasConflicts, "true") <strong><em>A Conflict of Interest exists at this time</em></strong> 
</div> 

Et voici JQuery que j'ai essayé de mettre dans la charge de la page, après une autre réponse du site, et la suppression du juste sous condition pour voir si je peux même obtenir le bouton "yesConflict" à choisir.

$(function() {   
    $('#yesConflict').prop('checked', true).change(); 
}; 

Le plus étrange est que l'événement de changement a lieu, ce qui devrait être l'ID correct, mais le bouton sélectionné sur l'écran ne change pas.

J'apprécie toute contribution, merci!

EDIT: J'ai reçu une requête pour la sortie HTML de ces lignes RadioButtonFor - la voici.

<div class="left-col" id="noConflict"> 
     <input checked="checked" data-val="true" data-val-required="The HasConflicts field is required." id="HasConflicts" name="HasConflicts" type="radio" value="false" /> <strong><em>No Conflict of Interest exists at this time</em></strong> 
    </div> 
    <div class="right-col" id="yesConflict"> 
     <input id="HasConflicts" name="HasConflicts" type="radio" value="true" /> <strong><em>A Conflict of Interest exists at this time</em></strong> 
    </div> 

lors de l'inspection via IE Developer Tools lors de l'exécution voici les deux entrées:

<input name="HasConflicts" id="HasConflicts" type="radio" checked="checked" value="false" data-val-required="The HasConflicts field is required." data-val="true" data-dpmaxz-eid="6"> 
<input name="HasConflicts" id="HasConflicts" type="radio" value="true" data-dpmaxz-eid="7"> 

S'il vous plaît laissez-moi savoir si je peux être d'une quelconque aide supplémentaire pour obtenir une réponse. Tout ce que j'ai recherché indique que la ligne JQuery que j'ai mise là devrait faire ce que je veux de JQuery 1.6 et plus, en utilisant 1.10 - mais ça ne fonctionne tout simplement pas.

Answer 1

D'abord, ID sont uniques

Pour id="HasConflicts" vous ne devriez pas l'utiliser plus d'une fois, essayez de le changer à class="HasConflicts" etc, parce que quand vous appelez #HasConflicts il ne cible le premier.

Solution à votre code jQuery:

Vous ciblez l'élément parent, utilisez $('#yesConflict > input') pour cibler la radio d'entrée (enfant direct de #yesConflict), vérifiez les points suivants:

Note:

$('#yesConflict input') utiliser l'espace, il va trouver toutes les entrées à l'intérieur #yesConflict

$('#yesConflict > input') utiliser > il ne cible l'enfant direct de #yesConflict

$(function() { 
 
    $('#yesConflict > input').prop('checked', true).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="left-col" id="noConflict"> 
 
    <input checked="checked" data-val="true" data-val-required="The HasConflicts field is required." id="HasConflicts" name="HasConflicts" type="radio" value="false" /> <strong><em>No Conflict of Interest exists at this time</em></strong> 
 
</div> 
 
<div class="right-col" id="yesConflict"> 
 
    <input id="HasConflicts" name="HasConflicts" type="radio" value="true" /> <strong><em>A Conflict of Interest exists at this time</em></strong> 
 
</div>