Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

JavaScript to Set Checkbox to Readonly

By Stephen Bucaro

Unfortunately the HTML checkbox element does not have a readonly attribute. The checkbox does have a disabled attribute, but setting the checkbox to disabled grays out the control implying that it does not apply. You may want the user to understand that the setting applies, it just can't be changed.

This simple example application provides a very simple work around that might be useful to help you solve the checkbox readonly problem in your own application. In operation the checkboxes onclick event executes a function to check if it should be readonly or not. If it should be readonly, if it's checked, it unchecks itself, if it's unchecked it checks itself.

That last sentence might seem confusing. Doesn't readonly mean it would keep it's current value? In this case you need the user to click on the checkbox to execute the onclick event, an action which sets the checked status to its opposite, so you immediately set it back to what it was before the user clicked - readonly.

In this example the user sets a radio button to pick a type of pizza, either regular, in which case the user can set the checkboxes to choose any ingredients they want. Or they can set a radio button to choose meat lovers, in which case the Beef, Chicken, and Pepperoni checkboxes are set and can't be unset. If you choose a meat lovers pizza - you get the meat. But you can still select which vegetables you want.

Shown below is the html code, without the table code used to lay out the form, for the pizza selection and configuration application.

<form>
<input type="radio" name="pizza" id="reg" value="regular" onclick="setPizza();" /><label for="regular">Regular</label>
<input type="radio" name="pizza" id="met" value="meatlover" onclick="setPizza();" /><label for="meatlover">Meat Lovers</label>

<input type="checkbox" id="beef" value="beef" onclick="setReadOnly(this);"  /><label for="beef">Beef</label>
<input type="checkbox" id="chicken" value="chicken" onclick="setReadOnly(this);" /><label for="chicken">Chicken</label>
<input type="checkbox" id="pepperoni" value="pepperoni" onclick="setReadOnly(this);" /><label for="pepperoni">Pepperoni</label>

<input type="checkbox" id="mushrooms" value="mushrooms" /><label for="mushrooms">Mushrooms</label>
<input type="checkbox" id="onions" value="onions" /><label for="onions">Onions</label>
<input type="checkbox" id="peppers" value="peppers" /><label for="peppers">Peppers</label>
</form>

Note that the radio button onclick events execute a function to set the pizza type. The onclick events of only the checkboxes that are to be readonly execute a function that prevents their checked status from being changed. The JavaScript code for these functions is shown below.

function setPizza()
{
   if(document.getElementById("met").checked)
   {
       document.getElementById("beef").checked = "checked";
       document.getElementById("chicken").checked = "checked";
       document.getElementById("pepperoni").checked = "checked";
   }
}

function setReadOnly(elem)
{
   if(document.getElementById("met").checked)
   {
         if(elem.checked) elem.checked = false;
         else elem.checked = true;
   }
}

This simple example application provides a very simple work around that might help you solve the checkbox element does not have a readonly attribute problem.

More Java Script Code:
• Calculators for Your Website : Fahrenheit to Celsius Converter
• Create Your Own Database Using Only Notepad : CDV
• JavaScript Variable Scope
• Easy Slide Show Code
• Easy Slide Show Code with Mouseover Pause
• Replace Drop-down with Drag-and-drop
• Code to Add Music to Your Webpage
• Regular Expressions Lookarounds
• Calendars for Your Website
• How Far Did the User Scroll?