Welcome to Bucaro TecHelp!

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

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

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:
• Calculators for Your Website : Decimal to Hexidecimal Converter
• Java Script Code to Calculate Speed / Distance of Falling Object
• Java Script Code to Move Items Between Select Lists
• Code for Java Script Cube / Box Volume Calculator
• Easy JavaScript Picture Selector Code
• Submit Forms Without CGI
• Easy Slide Show Code
• Introduction to HTML5 Canvas
• Basic State Machines
• Calendars for Your Website

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-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268