In this post I have explained how to select box hide concept like e-commerce website just choose an checkbox value change as select box value using java script coding and select box value disabled concept this post most help to classified and e-commerce website developers try this simple script take a look this live demo.
function closed(to,day)
JavaScript
Select box and check box name call the function on getElementById(day) select box to change loop value (to+"["+day+"][1]").value = 'Closed';
function closed(to,day)
{
if(document.getElementById(day).checked)
{
for(var i=1; i<=2;i++)
{
if(day>6)
day = day-7;
document.getElementById(to+"["+day+"][1]").value = 'Closed';
document.getElementById(to+"["+day+"][2]").value = 'Closed';
}
}
else
{
for(var i=1; i<=2;i++)
{
if(day>6)
day = day-7;
document.getElementById(to+"["+day+"][1]").value = '00:00';
document.getElementById(to+"["+day+"][2]").value = '23:59';
}
}
}
Html
Click check box closed the select box value and disabled select box just call in disabled="disabled" coding watch below coding
<p><span>Monday :</span>
<select id='time[0][1]' name='time01' >
<option value = '00:00'> PHP </option>
<option value = '00:00'>Javascript </option>
<option value = '00:30'>web design </option>
<option value = 'Closed'> Closed </option></select>
</span>
To
<select id='time[0][2]' name='time02' >
<option value = '00:00'>Database </option>
<option value = '00:00'>validation </option>
<option value = '00:30'>Css</option>
<option value = 'Closed'> Closed </option></select>
</select>
<input type='checkbox' id='0' name='0' onClick="closed('time','0')" class='cmn'> Closed</p>
<p><span>Monday :</span>
<select disabled="disabled" id='time[0][1]' name='time01' >
<option value = '00:00'> PHP </option>
<option value = '00:00'>Javascript </option>
<option value = '00:30'>web design </option>
<option value = 'Closed'> Closed </option></select>
</span>
To
<select disabled="disabled" id='time[0][2]' name='time02' >
<option value = '00:00'>Database </option>
<option value = '00:00'>validation </option>
<option value = '00:30'>Css</option>
<option value = 'Closed'> Closed </option></select>
</select>
<input type='checkbox' id='0' name='0' onClick="closed('time','0')" class='cmn'> Closed</p>
Live demo
Display hours of operation
Do not display hours of operation
Monday :
To
Closed