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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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.

<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>

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()
       document.getElementById("beef").checked = "checked";
       document.getElementById("chicken").checked = "checked";
       document.getElementById("pepperoni").checked = "checked";

function setReadOnly(elem)
         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:
• JavaScript Code to Restrict Keyboard Entries
• How to Place Image on HTML5 Canvas
• Java Script to Dynamically Add, Remove, and Change Items in a Select List
• Code for Java Script Circle/Sphere Calculator
• Create a Mouse Click Sound Effect
• Easy Java Script Timer Code
• Java Script Code to Re-arrange Items in a Select List
• Working With the Keyboard in Java Script
• Java Script to Get Selected Item from Select List Option Group
• Java Script to Get Selected Item from Drop-down Select List

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