désactiver la zone de texte en utilisant jquery?

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 vont être désactivées.Mais lorsque je choisis deux autres boutons radio, cela doit être show.J'ai besoin de l'aide dans Jquery.Merci dans 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>

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"); 
        }
      });

  });

Pas vraiment nécessaire, mais une petite amélioration du code d'okw qui rendrait l'appel de fonction plus rapide (puisque vous déplacez le conditionnel 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");
        });
    }
});

Ce fil est un peu vieux mais les informations doivent ê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").prop("disabled", false); 
        $("#checkbox1").prop("disabled", false);
    }
  });
});

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

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

Remarque: j'ai ajouté un identifiant à la case à cocher. N'oubliez pas non plus que les identifiants doivent être uniques dans votre document, alors supprimez les identifiants des boutons radio ou rendez-les uniques.

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

Je sais que ce n'est pas une bonne habitude de répondre à une vieille question, mais je mets cette réponse pour les gens qui verraient la question par la suite.

La meilleure façon de changer l'état dans JQuery est maintenant de

$("#input").prop('disabled', true); 
$("#input").prop('disabled', false);

Veuillez consulter ce lien pour une illustration complète. Désactiver / activer une entrée avec jQuery?

Je l'aurais fait légèrement 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);           
    });
});

De cette façon, si vous avez besoin d'ajouter plus de boutons radio, vous n'avez pas à vous soucier de changer le javascript

Je suppose que vous voulez probablement lier un événement "clic" à un certain nombre de boutons radio, lire la valeur du bouton radio cliqué et, en fonction de la valeur, désactiver / activer une case à cocher et / ou une zone de texte.

function enableInput(class){
    $('.' + class + ':input').attr('disabled', false);
}

function disableInput(class){
    $('.' + class + ':input').attr('disabled', true);
}

$(document).ready(function(){
    $(".changeBoxes").click(function(event){
        var value = $(this).val();
        if(value == 'x'){
            enableInput('foo'); //with class foo
            enableInput('bar'); //with class bar
        }else{
            disableInput('foo'); //with class foo
            disableInput('bar'); //with class bar
        }
    });
});

Désolé d'être si tard à la fête, mais je vois une marge d'amélioration ici. Pas concernant "désactiver la zone de texte", mais à la sélection de radionbox et la simplification du code, ce qui en fait un peu plus à l'épreuve du temps, pour des modifications ultérieures.

Tout d'abord, vous ne devez pas utiliser .each () et utiliser l'index pour désigner un bouton radio spécifique. Si vous travaillez avec un ensemble dynamique de boutons radio ou si vous ajoutez ou supprimez des boutons radio par la suite, votre code réagira sur le mauvais bouton!

Ensuite, mais ce n'était probablement pas le cas lors de la création de l'OP, je préfère utiliser .on ('click', function () {...}) au lieu de click ... http: //api.jquery. com / sur /

Lst mais pas des moindres, le code pourrait également être rendu plus simple et à l'épreuve du temps en sélectionnant le bouton radio basé sur son nom (mais qui apparaissait déjà dans un message).

J'ai donc fini avec le code suivant.

HTML (basé sur le code okw)

<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>

Code JS

$("[name='rad1']").on('click', function() {
    var disable = $(this).val() === "2";
    $("#textbox1").prop("disabled", disable); 
    $("#checkbox1").prop("disabled", disable); 
});

MVC 4 @ Html.CheckBoxPour généralement, les gens veulent agir en cochant et décochant la case mvc.

<div class="editor-field">
    @Html.CheckBoxFor(model => model.IsAll, new { id = "cbAllEmp" })
</div>

vous pouvez définir l'ID des contrôles que vous souhaitez modifier et en javascript, procédez comme suit

<script type="text/javascript">
    $(function () {
        $("#cbAllEmp").click("", function () {
            if ($("#cbAllEmp").prop("checked") == true) {
                    $("#txtEmpId").hide();
                    $("#lblEmpId").hide();
                }
                else {
                    $("#txtEmpId").show();
                    $("#txtEmpId").val("");
                    $("#lblEmpId").show();
             }
        });
    });

vous pouvez également modifier la propriété comme

$("#txtEmpId").prop("disabled", true); 
$("#txtEmpId").prop("readonly", true); 

$(document).ready(function () {
   $("#txt1").attr("onfocus", "blur()");
});

$(document).ready(function () {
  $("#txt1").attr("onfocus", "blur()");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="txt1">

obtenir la valeur des boutons radio et les correspond à chacun s'il est 3 puis désactivé checkbox and textbox.

$("#radiobutt input[type=radio]").click(function () {
    $(this).each(function(index){
    //console.log($(this).val());
        if($(this).val()==3) { //get radio buttons value and matched if 3 then disabled.
            $("#textbox_field").attr("disabled", "disabled"); 
            $("#checkbox_field").attr("disabled", "disabled"); 
        }
        else {
            $("#textbox_field").removeAttr("disabled"); 
            $("#checkbox_field").removeAttr("disabled"); 
        }
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="radiobutt">
  <input type="radio" name="groupname" value="1" />
  <input type="radio" name="groupname" value="2" />
  <input type="radio" name="groupname" value="3" />
</span>
<div>
  <input type="text" id="textbox_field" />
  <input type="checkbox" id="checkbox_field" />
</div>