désactiver la zone de texte à l'aide de jquery ?

Question

J'ai trois boutons radio avec le même nom et des valeurs différentes.lorsque je clique sur le troisième bouton radio, la case à cocher et la zone de texte seront désactivées.mais lorsque je choisis les deux autres boutons radio, ils doivent être affichés.j'ai besoin de l'aide de Jquery.merci d'avance ....

<form name="checkuserradio">
    <input type="radio" value="1" name="userradiobtn" id="userradiobtn"/> 
    <input type="radio" value="2" name="userradiobtn" id="userradiobtn"/>
    <input type="radio" value="3" name="userradiobtn" id="userradiobtn"/>
    <input type="checkbox" value="4" name="chkbox" />
    <input type="text" name="usertxtbox" id="usertxtbox" />
</form>

Answer 1

HTML

<span id="radiobutt">
  <input type="radio" name="rad1" value="1" />
  <input type="radio" name="rad1" value="2" />
  <input type="radio" name="rad1" value="3" />
</span>
<div>
  <input type="text" id="textbox1" />
  <input type="checkbox" id="checkbox1" />
</div>

Javascript

  $("#radiobutt input[type=radio]").each(function(i){
    $(this).click(function () {
        if(i==2) { //3rd radiobutton
            $("#textbox1").attr("disabled", "disabled"); 
            $("#checkbox1").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox1").removeAttr("disabled"); 
            $("#checkbox1").removeAttr("disabled"); 
        }
      });

  });

Answer 2

Pas vraiment nécessaire, mais une petite amélioration du code d'o.k.w. qui rendrait l'appel de fonction plus rapide (puisque vous déplacez la conditionnelle en dehors de l'appel de fonction).

$("#radiobutt input[type=radio]").each(function(i) {
    if (i == 2) { //3rd radiobutton
        $(this).click(function () {
            $("#textbox1").attr("disabled", "disabled");
            $("#checkbox1").attr("disabled", "disabled");
        });
    } else {
        $(this).click(function () {
            $("#textbox1").removeAttr("disabled");
            $("#checkbox1").removeAttr("disabled");
        });
    }
});

Answer 3

Ce fil de discussion est un peu ancien mais les informations devraient être mises à jour.

http://api.jquery.com/attr/

Pour récupérer et modifier les propriétés DOM telles que l'état coché, sélectionné, ou désactivé des éléments de formulaire, utilisez la méthode .prop().

$("#radiobutt input[type=radio]").each(function(i){
$(this).click(function () {
    if(i==2) { //3rd radiobutton
        $("#textbox1").prop("disabled", true); 
        $("#checkbox1").prop("disabled", true); 
    }
    else {
        $("#textbox1").removeProp("disabled"); 
        $("#checkbox1").removeProp("disabled"); 
    }
  });

}) ;

Answer 4

Je ne sais pas pourquoi certaines de ces solutions utilisent .each() - ce n'est pas nécessaire.

Voici un code fonctionnel qui désactive si la troisième case à cocher est cliquée, sinon il supprime l'attribut désactivé.

Remarque : j'ai ajouté un identifiant à la case à cocher. De plus, rappelez-vous que les identifiants doivent être uniques dans votre document, donc soit vous supprimez les identifiants des boutons radio, soit vous les rendez uniques.

$("input:radio[name='userradiobtn']").click(function() {
    var isDisabled = $(this).is(":checked") && $(this).val() == "3";
    $("#chkbox").attr("disabled", isDisabled);
    $("#usertxtbox").attr("disabled", isDisabled);
});

Answer 5

J'aurais fait les choses un peu différemment.

 <input type="radio" value="1" name="userradiobtn" id="userradiobtn" />   
 <input type="radio" value="2" name="userradiobtn" id="userradiobtn" />    
 <input type="radio" value="3" name="userradiobtn" id="userradiobtn" class="disablebox"/>   
 <input type="checkbox" value="4" name="chkbox" id="chkbox" class="showbox"/>    
 <input type="text" name="usertxtbox" id="usertxtbox" class="showbox" />

Attribut de classe d'avis

 $(document).ready(function() {      
    $('.disablebox').click(function() {
        $('.showbox').attr("disabled", true);           
    });
});

Ainsi, si vous devez ajouter des boutons radio, vous n'aurez pas à vous soucier de modifier le javascript.