JS - Disabilitare combo box con check box

May 25th 2010 by Paolo Bindi in: JS / Ajax / Jquery / Json | Tags: JS / Ajax / Jquery / Json

Vi illustro una semplice funzione javascript che permette di disabilitare la selezione di un combo box, se disabilitate un check box, senza uso di Ajax ne' di dover ricaricare la pagina.
Considerando che la pagina html presenta questo semplice codice html

<td nowrap="" align="center" width="50px">
  <input type="checkbox">
</td>

<td align="center">
    <select>
       <option selected="selected" value="0">Select option</option>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
    </select>
</td>

Se vogliamo che quando la check box e' disabilita, venga disabilitata anche la possibilita' di selezionare una option, ovvero il valore rimanga a zero (0), allora dobbiamo aggiungere questa funzione js, il cui evento scattera' all'on-click sul check box

function fnShowHiddenSelect(idCheck, idSelect){
	var oCheck=document.getElementById(idCheck);
	var oSelect=document.getElementById(idSelect);
	
	if (oCheck.checked){
		// enabling check 
		oSelect.disabled=false;
	}else{
		// disabling check 
		oSelect.disabled=true;
	}
}

e quindi il codice per l'on-click (notate anche la necessita' di assegnare il name e l'id ai due elementi della pagina.

<input type="checkbox" onclick="javascript:fnShowHiddenSelect('checkbox_01','combobox_01')" id="checkbox_01" name="checkbox_01">

<td align="center">
    <select name="combobox_01" id="combobox_01">
       <option selected="selected" value="0">Select option</option>
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
    </select>
</td>

Nel caso che riscontrate qualche errore o se volete contattarmi per qualche consiglio o suggerimento, utilizzate la form della sezione contatti