CODEWITHSUNDEEP
formsjavascript
Afar
Afar

Reputation: 57

Javascript : disable an input type text when clicking on a radio

I have a little problem and I hope you can help me, i'm trying to disable an input text when the user click on a radio.

My code :

<script> 
function grise(radio) 
{
if(radio[0].checked){
    document.anglais.annee.disabled=true;
    document.anglais.niv.disabled=true;
    document.anglais.testuti.disabled=true;} 
if(radio[1].checked){
    document.anglais.annee.disabled=false;
    document.anglais.niv.disabled=false;
    document.anglais.testuti.disabled=false;} 
} 
</script>

and the form :

<form name="anglais">

<input type="radio" id="NON" name="EVAL_ANGLAIS" onclick="grise(this.form.EVAL_ANGLAIS)" checked="checked" value="NON" <?=($personne->EVAL_ANGLAIS == "NON")?"checked":""?> >NON</br></br>

<input type="radio" id="OUI" name="EVAL_ANGLAIS" onclick="grise(this.form.EVAL_ANGLAIS)" value="OUI" onclick="active()" <?=($personne->EVAL_ANGLAIS == "OUI")?"checked":""?>>OUI</br></br>

Année : <input id="annee" disabled type="text" name="EVAL_ANGLAIS_ANNEE" style="width:30px; " value="<?=$personne->EVAL_ANGLAIS_ANNEE?>" >

Test utilisé : <input id="testuti" disabled type="text" name="EVAL_ANGLAIS_TEST" style="width:50px; " value="<?=$personne->EVAL_ANGLAIS_TEST?>" >

Niveau atteint : <input id = "niv" disabled type="text" name="EVAL_ANGLAIS_NIV" style="width:50px; " value="<?=$personne->EVAL_ANGLAIS_NIV?>" >

</form>

Upvotes: 0

Views: 722

Answers (2)

RobG
RobG

Reputation: 147383

Listeners are called with this set to the element they're on, so:

<input type="radio" id="NON" name="EVAL_ANGLAIS" onclick="grise(this.form.EVAL_ANGLAIS)" ...>

can be:

<input type="radio" id="NON" name="EVAL_ANGLAIS" onclick="grise(this)" ...>

so you know which one was clicked. Since there are only two buttons, one must be checked and one not checked so you only need to test the checkedness of one to know what the other is.

But instead of using two radio buttons, consider using a single checkbox and enabling or disabling the input based on whether it's checked or not:

<input type="checkbox" onclick="grise(this)" ...>

Then in the function:

function grise(checkbox) {
  var form = checkbox.form;
  form.annee.disabled = checkbox.checked;
  form.niv.disabled = checkbox.checked;
  form.testuti.disabled = checkbox.checked; 
}

Also, there is no need for:

<input ... checked="checked" ...>

the checked attribute is boolean, it does not require a value. The value was introduced only for XHTML, which is not used on the web, so just use:

<input ... checked ...>

Same for </br>, use <br>.

Upvotes: 2

Fotis_zzz
Fotis_zzz

Reputation: 148

You should try document.getElementById('annee').disabled=true;

Upvotes: 2

Related Questions