Desactiver tout les input et select d'un <div>

 <style type="text/css">
#contenu{width:500px;height:150px;float:left;border:1px solid #FF0000;}
#ligne{width:495px;float:left;height:auto;border:1px solid #0000FF;padding:5px 0}
#button{width:425px;text-align:center;padding-top:10px;float:left}
label{width:150px;float:left;text-align:left;color:#000000;font-weight:bold}
</style>

  <script language="javascript">
function activer(){
//activer les inputs

var inputs = document.getElementById("donnee").getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++){
inputs[i].disabled = false;
}

//activer les select
var selects = document.getElementById("donnee").getElementsByTagName('select');
for (var i = 0; i < selects.length; i++){
selects[i].disabled = false;
}
}




function desactiver(){
//activer les inputs
var inputs = document.getElementById("donnee").getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++){
inputs[i].disabled = true;
}

//activer les select
var selects = document.getElementById("donnee").getElementsByTagName('select');
for (var i = 0; i < selects.length; i++){
selects[i].disabled = true;
}
}
</script>

<form name="source-gratuit" id="source-gratuit" action="" method="post">
<div id="contenu">
<div id="donnee">
<div id="ligne"><label>Votre nom</label><input type="text" name="nom" id="nom"></div>
<div id="ligne"><label>Votre prenom</label><input type="text" name="prenom" id="prenom"></div>
<div id="ligne"><label>Profession</label><select name="prof" id="prof" >
<option value="0">Faites un choix</option>
<option value="1">Etudiant</option>
<option value="2">Salarié</option>
<option value="3">Ingénieur d'état</option>
<option value="4">Autres</option>
</select>
</div></div>
<div id="button">
<input type="button" name="active" id="active" value="Activer" onclick="return activer()">
<input type="button" name="désactiver" id="désactiver" value="désactiver" onclick="return desactiver()">
</div>

</div>
</form>