paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

JS - Disabilitare combo box con check box

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>