web-dev-qa-db-fra.com

jquery activer / désactiver la zone de texte basée sur le bouton radio

Dans ma page (jsp), j'ai un groupe de boutons radio et une zone de texte (qui est désactivée initialement).

  • Chaque fois que l'utilisateur clique sur un bouton radio, la zone de texte doit être activée
  • et lorsque l'utilisateur clique sur un autre bouton radio, la zone de texte devrait à nouveau être désactivée.

Je peux activer la case à cocher initialement désactivée avec le code ci-dessous.

$("#DevGroup_OTHER").click(function(){          
    $("#otherDevText").attr("disabled","");
})

Mes questions:

  • Mais comment puis-je désactiver à nouveau la zone de texte?
  • Existe-t-il une solution plus simple utilisant jQuery?

cordialement

13
sangram

Désactivez-le toujours (pour chaque bouton radio), puis réactivez-le si le bouton radio est celui qui active la zone de texte. À moins que l'utilisateur ne soit sur une machine construite en 1980, ce sera si rapide que personne ne le saura jamais.

$('radio').click(function() { 
    $("#otherDevText").prop("disabled",true);
    if($(this).attr('id') == 'enable_textbox') {
        $("#otherDevText").prop("disabled",false);
    }
});

Alternativement, s'il existe plusieurs boutons radio qui activeront la zone de texte:

$('input:radio').click(function() { 
  $("#otherDevText").prop("disabled",true);
  if($(this).hasClass('enable_tb')) {
      $("#otherDevText").prop("disabled",false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="DevGroup_OTHER">
  <input type="radio" id="d1" name="r1" value="d1">dev1 <br /> 
  <input type="radio" id="d2" name="r1" value="d2">dev2 <br/> 
  <input type="radio" id="d3" name="r1" value="d3" class="enable_tb"> enable
</fieldset>
<br />
<input id="otherDevText" name="tb1" disabled="disabled"
       value="some Textbox value" type="text">

Ça a du sens?

33
KyleFarris
$("#some_other_radiobutton").click(function(){
  $("#otherDevText").attr("disabled","disabled");
});
7
Andy Gaskell