I wrote the following code for an example of standard checkboxes vs. ARIA checkboxes and included the CSS and JS in one file so it can be copied/pasted. I haven't written JS in a while and I got the function I want working by calling an element by its id. I have multiple elements and I'd like to update the function to work for each one. I know it's super easy but, as I said, I haven't written JS in some time. I have the following checkboxes written by including ARIA attributes to span elements.
<fieldset>
<legend id="check_title">ARIA Checkboxes</legend>
<p>Checkboxes using ARIA and JavaScript:</p>
<div role="application">
<div class="checkboxes" aria-labelledby="check_title">
<!-- The "aria-labelledby" attribute is required because label elements can only be applied to form elements. -->
<!-- We are using span elements instead of default HTML checkbox inputs so aria-labelledby is needed for association. -->
<span role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="labelA" id="optionA" onclick="toggleState();" onkeyup="ARIA_Checkbox_Key(event);">
<img src="unchecked.png" alt="" role="presentation" id="imageA">
<label id="labelA">Option A</label>
</span>
<br />
<span role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="labelB" id="optionB" onclick="toggleState();" onkeyup="ARIA_Checkbox_Key(event);">
<img src="unchecked.png" alt="" role="presentation" id="imageB">
<label id="labelB">Option B</label>
</span>
</div>
</div>
</fieldset>
Then I have the following JavaScript to toggle the aria-checked attribute and the image from unchecked to checked:
<script type="text/javascript">
// This function binds the event keycode 32 (space bar) to run the function toggleState
// This is needed since the default functionality of a check box is triggered with the space bar
function ARIA_Checkbox_Key(event) {
if(event.keyCode == 32) {
toggleState()
}
}
// This function gets the aria-checked attribute of an element. If it is false, it makes it true and vice versa.
function toggleState() {
var getvalue=document.getElementById("optionA").getAttribute("aria-checked");
if (getvalue=="false") {
document.getElementById("optionA").setAttribute("aria-checked", "true");
document.getElementById("imageA").setAttribute("src", "checked.png");
} else {
document.getElementById("optionA").setAttribute("aria-checked", "false");
document.getElementById("imageA").setAttribute("src", "unchecked.png");
}
}
</script>
Clicking the image or label for Option A or Option B will toggle the class and image for Option A. This code currently works but what I can't remember and for the life of me can't figure out what to google is how to update this to account for each individual checkbox. I believe I need to create an array then reference the right point in the array but I don't recall how to accomplish that.
You need to pass through the target to the functions:
onclick="toggleState(this);"
onkeyup="ARIA_Checkbox_Key(event);"
Then for the event, use the event target:
function ARIA_Checkbox_Key(event) {
if (event.keyCode == 32) {
toggleState(event.target);
}
}
And once the target element is passed through you can get the child using getElementsByTagName:
function toggleState(el) {
var img = el.getElementsByTagName('img')[0],
getvalue = el.getAttribute("aria-checked");
if (getvalue == "false") {
console.log('toggleState', true);
el.setAttribute("aria-checked", "true");
img.setAttribute("src", "checked.png");
} else {
console.log('toggleState', false);
el.setAttribute("aria-checked", "false");
img.setAttribute("src", "unchecked.png");
}
}
Related
What I'm trying to do is when the checkbox is checked, change the background color of the div, and when it's unchecked, remove the background color. How can I do this using jquery?
<div class="checkbox-container">
<input type="checkbox" class ="checkbox-border" id="personal-info-checkbox">
<label for="personal-info-checkbox"> Mark as reviewed and acknowledged
</label>
</div>
using parent selector and .removeclass I do not know how to select my div and turn the color off and on using jquery.
You don't need jQuery for this
You can do this only with css.
.checkbox-container:has(input:checked) {
background-color: red;
}
:has pseudo class is supported in chromium, safari.
For firefox, need to enable flag.
know more at mdn ::has pseudo class
Add a change event listener to the input that sets its closest parent div's background color based on whether it is checked:
$('input[type="checkbox"]').change(function(){
$(this).closest('div').css('background-color', this.checked ? 'green' : 'white')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-container">
<input type="checkbox" class ="checkbox-border" id="personal-info-checkbox">
<label for="personal-info-checkbox"> Mark as reviewed and acknowledged
</label>
</div>
Try this I hope this will help you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#personal-info-checkbox").click(function(){
if($(this).is(":checked")){
$(this).parent().addClass("color-blue");
}else {
$(this).parent().removeClass("color-blue");
}
});
});
</script>
<style>
.checkbox-container
{
padding:20px;
}
.color-blue {
background-color:blue;
}
</style>
</head>
<body>
<div class="checkbox-container">
<input type="checkbox" class ="checkbox-border" id="personal-info-checkbox">
<label for="personal-info-checkbox"> Mark as reviewed and acknowledged
</label>
</div>
</body>
</html>
Here's an example of how you can do this
$(function() {
$("input[type=checkbox]").click( () => {
$("div").toggleClass("background");
})
});
.background {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:4em;">
Change colors<input type="checkbox" />
</div>
There are a number of ways to do this:
CSS (with limited, as of writing, browser support),
jQuery (among other libraries), and
native JavaScript.
The below example has explanatory comments in the code:
// using jQuery, we select the relevant element via its class, and use the on()
// method to bind the anonymous function as the event-handler for the 'change'
// event:
$('.checkbox-container.with-jQuery').on('change', function(){
// here we find the <input> element descendant with find(), and then use the
// is() method to test that element to see if it matches the :checked pseudo-
// class; this returns a Boolean true/false which is cached in the 'checked'
// variable:
let checked = $(this).find('input').is(':checked');
// here we use toggleClass() to toggle the 'checked' class-name on the element,
// and use the 'checked' variable to ascertain whether the class should be
// added/retained (if the Boolean is true) or removed/not-added (if the Boolean
// is false):
$(this).toggleClass('checked', checked);
});
// using JavaScript we use document.querySelector to retrieve the element
// with the listed classes; and use EventTarget.addEventListener() to bind the
// anonymous Arrow function as the event-handler for the 'change' event:
document.querySelector('.with-JavaScript.checkbox-container').addEventListener('change',(evt)=>{
// we cache a reference to the current element (the <div>):
let current = evt.currentTarget,
// we find the <input> descendant, and access its checked property to
// obtain a Boolean true (if checked) or false (if not-checked) and
// store that Boolean in the 'checked' variable:
checked = current.querySelector('input').checked;
// here we use Element.classList.add() to add the 'active' class-name,
// with the checked variable to determine if it should be added/retained
// (if true) or removed/not-added (if false):
current.classList.add('active', checked);
});
:root {
--checkedColor: lime;
}
/* here we select the element via classes, and use :has()
to check if it has a descendant element which matches
the enclosed selector: */
.with-CSS.checkbox-container:has(input:checked) {
/* if so, we set the --checkedColor custom property
as the background-color of the element: */
background-color: var(--checkedColor);
}
.with-jQuery.checkbox-container.checked {
background-color: var(--checkedColor);
}
.with-JavaScript.checkbox-container.active {
background-color: var(--checkedColor);
}
<!-- each wrapper <div> has a 'with-...' class applied in order to identify which
approach is being taken: -->
<div class="checkbox-container with-CSS">
<!-- an id must be unique, to that end - because there are three checkboxes in
this example - the id has been modified, as has the corresponding <label>
element's 'for' attribute: -->
<input type="checkbox" class="checkbox-border" id="personal-info-checkbox1">
<label for="personal-info-checkbox1"> Mark as reviewed and acknowledged
</label>
</div>
<div class="checkbox-container with-jQuery">
<input type="checkbox" class="checkbox-border" id="personal-info-checkbox2">
<label for="personal-info-checkbox2"> Mark as reviewed and acknowledged
</label>
</div>
<div class="checkbox-container with-JavaScript">
<input type="checkbox" class="checkbox-border" id="personal-info-checkbox3">
<label for="personal-info-checkbox3"> Mark as reviewed and acknowledged
</label>
</div>
References:
Browser compatibility:
:has().
CSS:
CSS Custom properties.
:checked.
:has().
var().
JavaScript:
document.querySelector().
Element.classList API.
jQuery#
is().
on().
toggleClass().
I have a list of of checkboxes that are being used a search fields for a database. When someone clicks a checkbox it will show a button with the text from the label of that checkbox. However, I need that button to be have empty text when it is not visible (in the case of someone clicking the checkbox to hide the button).
Here's my code:
$(document).ready(function() {
$('#locationAll').click(function() {
var value = $('#locationAll').parent().text();
$('#location-all-button').html(value + " ×").toggle('fast');
});
});
$(document).ready(function() {
$('.search-popup').click(function() {
$(this).hide('fast');
});
if ($('.search-popup').css('display') == 'none') {
$(this).text("");
};
});
button {
background-color: lightgray;
border-radius: 20px;
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" value="all" id="locationAll" />All
</label>
<br>
<br>
<button class="search-popup btn" id="location-all-button"></button>
For some reason I can't make the button stay hidden before the checkbox on the example here but that isn't a problem in my full code. if you need more info let me know I might have missed something.
Ok so I changed a few things. I made this work for any checkbox that follows the naming scheme I made really quickly. The scheme is the id of the button = the "button-"+id. Also I hiding all buttons with a class right form the start to set their default state.
$(document).ready(function()
{
\\change to allow all checkboxes to trigger
$('input[type=checkbox]').click(function()
{
\\change the id so it match a button when add "button-" to the start
\\this allows me to target the matching button with any chechbox
$('#button-'+$(this).attr('id')).toggle('fast');
});
$('.search-popup').click(function()
{
$(this).hide('fast');
\\ sets the check box to false so it not checked when you close it
$("#"+$(this).text().replace(" ×","")).attr('checked', false);
});
\\hides all buttons right form the start
$('button.search-popup').each(function()
{
$(this).hide();
});
});
<label>
<input type="checkbox" value="all" id="All" />All
</label>
<br>
<br>
<button class="search-popup btn" id="button-All">All ×</button>
now if you want to create and remove buttons when a checkbox has changed state you can add an if state meant in that checks to see if the button with the matching id exists or not,!$(tag).size().
I am facing a weird problem. I have a link tag to download like
<div class="col-md-4 about-right">
<ul>
<h5>Get My Cv</h5>
<li><span class="glyphicon glyphicon-user"><input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF</li>
<li><span class="glyphicon glyphicon-user"><input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
<li><span class="glyphicon glyphicon-user"><input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
<center>
<a href="#" id="cvLink" download onclick="getCv()">
<button type="button" class="btn btn-info">Download</button></a>
</center>
</ul>
</div>
Which downloads documents using radio button checked validation.I have also 3 radio button. I change the URL link based on which radio button is clicked and download the documents using JavaScript. But the problem is when any of the radio button is unclicked I want to show an alert and make the link to do nothing.
I tried this by using "# , javaScript:void(0)". it shows the alert but also downloads the main HTML file on which I am working on. I just want the link will do nothing but show the alert only.
My code is something like below
<script>
function getCv() {
if(document.getElementById('radio1').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=MZTFCWnRYbnlvclk";
}
else if(document.getElementById('radio2').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=uK6ct7MZ2N6Ni1qQUFyWXM";
}
else if(document.getElementById('radio3').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=0VDenJqUldud2M";
}
else
{
alert('Please Select Any Format To Download!!');
}
return false;
}
</script>
First, before we get to the answer to your question I'd like to take a moment to point out some issues with your HTML:
<div class="col-md-4 about-right">
<ul>
<h5>Get My Cv</h5>
<li><span class="glyphicon glyphicon-user">
<input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF
</li>
<li><span class="glyphicon glyphicon-user">
<input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
<li><span class="glyphicon glyphicon-user">
<input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
<center>
<a href="#" id="cvLink" download onclick="getCv()">
<button type="button" class="btn btn-info">Download</button>
</a>
</center>
</ul>
</div>
So, the first problem is one that recurs twice, that the only valid direct child element of a <ul> (or an <ol>) is the <li> element. The others you have in there, the <h5> and the <center> (more on that in a moment) are invalid HTML where they're placed here.
You have the option of either removing those elements from the <ul>, as I've done, or you can simply wrap them in a parent <li> so that the DOM structure becomes valid.
Further, the <center> element has been deprecated since HTML 4.1, I think. Regardless of when it was deprecated, however, it remains deprecated and should no longer be used. If you should need to center something in your layout use CSS to style the presentation of the document, HTML should only define the structure.
Also, and I think this is the last issue with your HTML, it's invalid HTML to have an interactive element, such as a <button>, within another interactive element, such as an <a>. In my demo to reproduce your problem I simply discarded the <button> element, since it has no download attribute.
That said, the following JavaScript is my proposed solution, the HTML is also in the snippet along with the JavaScript and CSS:
// a named function to highlight the <input> elements required
// in order to enable the <a> element:
function highlightRequirements(e) {
// caching the element that initiated the events
// here the <a> element:
let clicked = this,
// retrieving the elements that are required to
// be chosen amongst before the <a> can be used:
required = document.querySelectorAll(
// I store, in the <a> element the attribute:
// data-required="input[name=optradio]"
// here we use the HTMLElement.dataset interface
// to retrieve that selector, which is passed as
// the argument to document.querySelectorAll:
clicked.dataset.required
);
// if the event type (the event, 'e', is passed automatically
// from the EventTarget.addEventListener() method) is the
// 'mouseenter' event:
if (e.type === 'mouseenter') {
// if the <a> element has the download attribute set:
if (clicked.download) {
// we remove the event-listener bound to that element
// for both 'mouseenter' and 'mouseleave' events:
this.removeEventListener('mouseenter', highlightRequirements);
this.removeEventListener('mouseleave', highlightRequirements);
// and we iterate over the required elements, using
// Array.prototype.forEach(), and an Arrow function
// expression, to remove the 'highlight' class from
// the parentNode of each required ('req') element:
required.forEach(req => req.parentNode.classList.remove('highlight'));
} else {
// if the <a> element does not have the download property,
// we iterate over the required elements and add the
// 'highlight' class-name, in order to trigger the animation
// defined in the CSS, in order to draw the users' attention:
required.forEach(req => req.parentNode.classList.add('highlight'));
}
// otherwise, if the event was not the 'mouseenter' event (and so
// must be the 'mouseleave' event):
} else {
// we iterate over the required elements, and remove the 'highlight'
// class-name from their parentNodes:
required.forEach(req => req.parentNode.classList.remove('highlight'));
}
}
// a named function, fired by the radio inputs, to
// 'enable' or 'activate' the <a> element:
function linkActivate(e) {
// we use document.querySelector to retrieve the first
// - if any - element matching the supplied selector:
var link = document.querySelector(
// similarly to above, I stored the selector for the
// relevant <a> element in the 'data-link' attribute,
// and retrieve that attribute-value using the
// HTMLElement.dataset interface:
this.dataset.link
);
// setting the download attribute to 'true':
link.download = true;
// retrieving the 'data-downloadfrom'
// attribute-value from the changed
// radio input:
link.href = this.dataset.downloadfrom;
// adding the 'allowed' class to the
// <a> element, to show that interaction
// is now possible:
link.classList.add('allowed');
}
// selecting all the <input> elements with name="optradio":
let radios = document.querySelectorAll('input[name=optradio]'),
// converting that NodeList into an Array, using
// Array.from():
radioArray = Array.from(radios),
// retrieving the <a> element using
link = document.querySelector('#cvLink');
// iterating over the Array of radio-inputs using
// Array.prototype.forEach() and an Arrow function:
radioArray.forEach(
// here we bind the linkActivate() function as the
// event-handler for the 'change' event:
radio => radio.addEventListener('change', linkActivate)
);
// here we bind the highlightRequirements() function as
// the event-handler for the 'mouseenter' and 'mouseleave'
// events for the <a> element:
link.addEventListener('mouseenter', highlightRequirements);
link.addEventListener('mouseleave', highlightRequirements);
function highlightRequirements(e) {
let clicked = this,
required = document.querySelectorAll(clicked.dataset.required);
if (e.type === 'mouseenter') {
if (clicked.download) {
this.removeEventListener('mouseenter', highlightRequirements);
this.removeEventListener('mouseleave', highlightRequirements);
required.forEach(req => req.parentNode.classList.remove('highlight'));
} else {
required.forEach(req => req.parentNode.classList.add('highlight'));
}
} else {
required.forEach(req => req.parentNode.classList.remove('highlight'));
}
}
function linkActivate(e) {
let link = document.querySelector(this.dataset.link);
link.download = true;
link.href = this.dataset.downloadfrom;
link.classList.add('allowed');
}
let radios = document.querySelectorAll('input[name=optradio]'),
radioArray = Array.from(radios),
link = document.querySelector('#cvLink');
radioArray.forEach(
radio => radio.addEventListener('change', linkActivate)
);
link.addEventListener('mouseenter', highlightRequirements);
link.addEventListener('mouseleave', highlightRequirements);
#keyframes highlight {
0% {
background-color: transparent;
}
75% {
background-color: limegreen;
}
100% {
background-color: transparent;
}
}
ul + a {
display: inline-block;
text-align: center;
text-decoration: none;
margin: 0.5em auto;
}
ul + a {
color: #66c;
cursor: no-drop;
border: 2px solid #66c;
padding: 0.2em 0.4em;
border-radius: 0.5em;
opacity: 0.5;
}
ul + a.allowed {
opacity: 1;
cursor: pointer;
}
li span.highlight {
animation: 3s highlight;
}
<div class="col-md-4 about-right">
<ul>
<li>
<span class="glyphicon glyphicon-user">
<input type="radio"class="rad" id="radio1" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=MZTFCWnRYbnlvclk" data-link="#cvLink" />
</span>Download In PDF</li>
<li>
<span class="glyphicon glyphicon-user">
<input type="radio" class="rad" id="radio2" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=uK6ct7MZ2N6Ni1qQUFyWXM" data-link="#cvLink" />
</span>Download In Word Doc
</li>
<li>
<span class="glyphicon glyphicon-user">
<input type="radio" class="rad" id="radio3" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=0VDenJqUldud2M" data-link="#cvLink" />
</span>Download In HTML
</li>
</ul>
Download CV
</div>
JS Fiddle demo.
The above seems to work, though I've not verified it properly; it certainly doesn't throw any errors playing with it in the JS Fiddle demo (attached), and I think clearly shows that selecting from the radio <input> elements is required.
It seems that with the download attribute present that the download is initiated before the execution of the function you had attached via the onclick in-line event-handler (which is obtrusive JavaScript, and is why I bound events in my demo entirely in JavaScript, though I did bind a lot of data to the elements in the HTML), in this attempted solution I remove that download attribute and only add it, via JavaScript, once one of the radios is selected.
It is not enough to have the getCv function return false. You need to write the return false into the onclick itself or have the result of the getCv function call be returned inline in the onclick itself:
<a href="#" id="cvLink" download onclick="return getCv();">
Also, the return value of the getCv function should depend on whether you want the link to be executed:
function getCv() {
if(document.getElementById('radio1').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=MZTFCWnRYbnlvclk";
return true;
}
else if(document.getElementById('radio2').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=uK6ct7MZ2N6Ni1qQUFyWXM";
return true;
}
else if(document.getElementById('radio3').checked) {
document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=0VDenJqUldud2M";
return true;
}
else
{
alert('Please Select Any Format To Download!!');
return false;
}
}
You should add an "return false;" statement to the end of the getCv function.
This will prevent the a from executing.
I have two images on my html page and I have one button named MOVE to move them left separately. To move them I have a Jquery function with selected class.
I have two input fields each of them belongs to the particular image. My button has a click counter function so I need to get a count by clicking on the same button to both images separately into those two input fields.
I think when I select image 1, It's also should be selected input 1, and then the counter will count image 1's counts of moves and when I select image 2, It's also should be selected input 2, and then the counter will count image 2's counts of moves.
I don't know how to select multiple elements by clicking on one element. please help
My Jquery function
$(document).ready(function() {
$(".plan1").click(function() { //medium move
// unselect others
$(".plan1").removeClass("selected");
// reselect this one
$(this).addClass("selected");
});
$("#b1").click(function() {
// animate selected
$(".plan1.selected").animate({left:'+=20px'});
$('#f1.selected').val(function(i, val) { return +val+1 });
});
});
HTML
<img src="imagesource" class="plan1" />
<img src="imagesource" class="plan1" />
<input type="text" id="f1" />
<input type="text" id="f2" />
<button id="b1">MOVE</button>
This might get you started.
jsFiddle Demo
$('#f1, #f2').val('0');
$(".plan1").click(function() {
$(".plan1").removeClass("selected");
$(this).addClass("selected");
});
$("#b1").click(function() {
if ( $(".plan1.selected").length == 0 ) {
alert("Pick a pic");
return false;
}
var inpID = $(".plan1.selected").attr('id').slice(-1);
var cnt = $('#f'+inpID).val();
cnt++;
$('#f'+inpID).val(cnt);
$(".plan1.selected, #f"+inpID).animate({'left' : '+=50px' });
$(".plan1.selected").removeClass("selected");
});
* {position:relative;} /* Critical! Allows elements to move */
img, input{display:block;max-width:80px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="pic1" src="http://lorempixel.com/80/80" class="plan1" />
<img id="pic2" src="http://lorempixel.com/80/80/animals" class="plan1" />
<input type="text" id="f1" />
<input type="text" id="f2" />
<button id="b1">MOVE</button>
Notes:
(1) In CSS, you must first make the elements position:relative because the default (position:static) cannot be styled with left or right
(2) In CSS, also must make the inline elements img and input into block elements, because inline elements cannot be animated left/right
I wanted to have some radio buttons that disabled when the mouse went over and enabled again when it went out (just for fun).
<form>
<input type="radio" name="rigged" onMouseOver="this.disabled=true" onMouseOut="this.disabled=false">
</form>
When the mouse goes on it it does what it should be when it goes back off the button wont re-enable. Also, how do I make it default to enable so that when you refresh the page it doesn't stay disabled.
Thanks in advance.
You could achieve the same effect by wrapping your radio buttons in a div tag and setting the onmouseover and onmouseout events.
<div id="container" onmouseout="this.disabled=false" onmouseover="this.disabled=true">
<input name="rigged" type="radio">
</div>
The above solution only works in IE, for a solution that works in FireFox do the following.
<script type="text/javascript">
function toggleDisabled(el) {
try {
el.disabled = el.disabled ? false : true;
}
catch(E){
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
</script>
*This javaScript function was borrowed from here: Enable or disable DIV tag and its inner controls using Javascript
<div id="container" onmouseover="toggleDisabled(this)" onmouseout="toggleDisabled(this)">
<input name="rigged" type="radio">
</div>
The inputs do not fire the mouseout events because they are disabled.
So you have to wrap it in a div and catch the div's events.
If you want pure javascript, use Phaedrus's example "toggleDisabled" script.
If you want jQuery and not-so-newbie friendly:
<html>
<head>
<title>Page</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function() {
function toggleDisabled(d) {
var disable = d;
this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
}
$("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
});
</script>
</head>
<body>
<form>
<div class="radios">
<input type="radio" name="rigged" value="1"/> Item One<br />
<input type="radio" name="rigged" value="2"/> Item Two<br />
<input type="radio" name="rigged" value="3"/> Item Three<br />
<input type="radio" name="rigged" value="4"/> Item Four
</div>
</form>
</body>
</html>
I had a similar problem with wanting an image to expose, and then go regular when the mouse left the image. I was using jQuery and ended up hooking into mouseenter and mouseout, instead of the events you are using. You might want to try those.
$('#rigged').mouseenter(function() {
$(this).disabled = true;
}).mouseout(function() {
$(this).disabled = false;
});
Something like that.
Again, that's using jQuery.
(You'll have to give the input radio button the id 'rigged')
I think when it's becoming disabled, it's not going to fire any events.
You could try a few things.
On mouseover, make an invisible div overlay the radio box. This will make it impossible to use. Then on the mouseout of this invisible div, remove the div.
You could play with mouse x and y coords, and see if they overlay your radio elements. This isn't an optimal solution though.
Markup for the first, in jQuery, would go something like this
$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element
$('#rigged').bind('mouseover', function() {
$('#overlay').show();
});
$('#overlay').live('mouseout', function() {
$(this).hide();
});
You'll need to adapt this to work with multiple elements.