jQuery pour désactiver/activer le textarea en fonction bouton radio est sélectionné à l'intérieur de la boucle

J'ai la suite de champs de formulaire. Si le bouton radio (travel_yes/no_##) est modifié à partir de No à Yes, puis le suivant textarea (travelDetails_#) doivent être activées. Si ils changent on Ne, puis le textarea doit être désactivé de nouveau. Je tiens à rester loin de l'aide de .next() ou .find() pour la performance car je sais que mes valeurs d'ID unique (également l'emplacement des champs textarea peut changer).

MISE À JOUR: BOUTONS RADIO DEVRAIENT ÊTRE DES GROUPES, PAR JEU, PAS TOUS ENSEMBLE

<div class="controls">
<label class="radio inline">
<input type="radio" name="travel1" data-travelNumber="1" id="travel_yes_1" value="Yes" tabindex="25" >
Yes 
</label>
<label class="radio inline">
<input name="travel1" type="radio" data-travelNumber="1" id="travel_no_1" value="No" tabindex="26" checked >
No
</label>
</div>
<div class="controls">
<textarea name="travelDetails" id="travelDetails_1" ></textarea>
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="travel2" data-travelNumber="2" id="travel_yes_2" value="Yes" tabindex="25" >
Yes
</label>
<label class="radio inline">
<input name="travel2" type="radio" data-travelNumber="2" id="travel_no_2" value="No" tabindex="26" checked >
No
</label>
</div>
<div class="controls">
<textarea name="travelDetails" id="travelDetails_2"></textarea>
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="travel3" data-travelNumber="3" id="travel_yes_3" value="Yes" tabindex="25" >
Yes
</label>
<label class="radio inline">
<input name="travel3" type="radio" data-travelNumber="3" id="travel_no_3" value="No" tabindex="26" checked >
No
</label>
</div>
<div class="controls">
<textarea name="travelDetails" id="travelDetails_3"></textarea>
</div>

Voici mon jQuery code qui ne fonctionne PAS.

$("[data-travelNumber]").each(function() {
var $this = $(this), limit = +$(this).data("travelNumber");
$("input:radio[name=travel]:checked").live('click',function(){
if ( $(this).val() === 'Yes' )
$('#travelDetails_' + limit).removeAttr('disabled');
else
$('#travelDetails_' + limit).attr("disabled", "enabled");
});
});
});
  • Il est toujours préférable de ne PAS utiliser des attributs HTML, il limite la validation du code et peut ne pas fonctionner correctement dans tous les navigateurs.
  • C'est un produit principal et le navigateur du client prend en charge. Mais c'est une bonne info pour quelqu'un d'autre qui pourrait venir à travers ce, aussi.
InformationsquelleAutor HPWD | 2012-12-21
  1. 1

    Vous pouvez le faire comme ceci en prenant le numéro de l'id de trouver un textarea

    $('input[type=radio]').change(function(){
var $p = $(this).closest('.controls');
var $checked = $p.find(':checked');
$('#travelDetails_' + this.id.slice(-1)).prop('disabled',$checked.val() == 'No');   
}).change();

    http://jsfiddle.net/hnwYM/

    ou le changer si jamais vous avez des chiffres plus 9

    $('#travelDetails_' + this.id.slice(-1))

    à

    $('#travelDetails_' + this.id.split('_')[2])

    Ou vous pouvez utiliser vos données attr

    $('#travelDetails_' + $(this).attr('data-travelNumber'))

    Vous pouvez utiliser la même méthode pour arrêter de traverser le dom

    $('input[type=radio]').change(function(){
var num = $(this).attr('data-travelNumber');
var $checked = $('input[id$=_' + num + ']:checked');
$('#travelDetails_' + num).prop('disabled',$checked.val() == 'No');   
}).change();

    http://jsfiddle.net/U9Ywe/

    • J'ai retrouver pas compris que l'origine. Désolé et merci pour la capture de la radio de tous les noms.
    • Vérifier la solution... C'est l'approche que je visais pour moi-même.
    • Ack, j'essaie de rester à l'écart de traverser le DOM depuis que je ne suis pas 100% sûr de l'emplacement de la zone de texte de la boîte. C'est encore un projet pour le client et ils veulent peut-être quelque part d'autre.
    • édité mon code pour ne pas traverser le dom à tous
    • Je vais re-évaluer votre solution.
    InformationsquelleAutor ᾠῗᵲᄐᶌ
  2. 3

    J'ai créé quelque chose dans JsFiddle qui fait le tour pour vous. Je fixe les boutons de la radio des noms de groupe, car ils ont tous le même nom.

    JS:

    $(document).ready(function() {
//disable all the textarea on start
$("textarea").attr("disabled", true);
$("input[type=radio]").change(function() {
var id = $(this).attr("id").split("_");
id = id[id.length-1];
//or use your data-travelNumber attribute
//id = $(this).data('travelNumber');
$("#travelDetails_" + id).attr("disabled", !($(this).val() == "Yes"));
});
});​

    Voici l'exemple: JsFiddle exemple

    • Cette solution a aussi travaillé et a été un peu plus facile pour moi de lire (basé sur mon expérience de l'utilisation de jQuery), puisque je n'ai pas étudié l' .prop() encore une fonction.
    InformationsquelleAutor Sven van Zoelen
  3. 0

    Cela devrait le faire:

    $("input:radio[name=travel]").live('click', function() {
$('travelDetails_' + $(this).data("travelNumber")).attr('disabled', $(this).val() === 'Yes');
});

    Quand un bouton est cliqué, c'est faire le travelNumber, et d'activer ou de désactiver le textarea avec id='travelDetails_'+travelNumber, selon le nombre.

    InformationsquelleAutor Cerbrus
  4. 0

    Essayez ceci:

    $("input:radio[name=travel]").live('click', function() {
f = $(this).attr("id").search("yes");
i = $(this).attr("id").split("_")[2];
if(f != -1) {
$("#travelDetails_" + i).removeAttr('disabled');
} else {
$("#travelDetails_" + i).attr("disabled", "true");
}
});
    InformationsquelleAutor ATOzTOA
  5. 0
    $("[data-travelNumber]").click(function(){
var txt = $("#travelDetails_" + $(this).attr("data-travelNumber"));
if($(this).val() === "Yes")
txt.removeAttr("disabled");
else
txt.attr("disabled", "disabled");
});​
    InformationsquelleAutor Jason Whitted
  6. 0

    Vous pouvez le faire de cette façon

    Démonstration En Direct

    $("input:radio[name^=travel]").live('click', function() {
idparts = this.id.split('_');
textArea = document.getElementById('travelDetails_' + idparts[idparts.length - 1]);
if (this.value === 'Yes')
textArea.disabled = true;
else 
textArea.disabled = false;
});​
    • Bonne réponse, mais il a déclaré I'd like to stay away from using .next() or .find() for performance
    • Aussi, les boutons de la radio doit être indépendante, et non à un groupe.
    • mais ils ont tous le même nom.. qui regroupe
    • La moitié du code: $(this).closest('.controls').next('.controls').find('textarea').attr('disabled', $(this).val() === 'Yes');
    • J'ai utilisé le javascript pour créer des identifiants pour augmenter les performances ont un coup d'oeil
    InformationsquelleAutor Adil