Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

JavaScript to Set Checkbox to Readonly

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:
• Use JavaScript parseInt() and parseFloat() to Convert Strings to Numbers
• Easy JavaScript Form Design
• Calculators for Your Website : Fahrenheit to Celsius Converter
• Easy JavaScript Picture Selector Code
• Where Did the User Click?
• Basic State Machines
• Code to Drag and Drop an Image Anywhere on a Webpage
• Synchronous and Asynchronous Script Loading
• How to Disable the Browser Back Button
• Easy Graph Generating Code

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268