Is it possible to make a radio button 'unclickable'/ 'unselectable' without 'disabling' it?
For aesthetic reasons I need to know if this is possible and how it might be achieved.
Current code as follows:
<input name='example' value='1' type='radio'/>
<input name='example' value='2' checked='checked' type='radio'/>
<input name='example' value='3' type='radio'/>
<input name='example' value='4' type='radio'/>
<input name='example' value='5' type='radio'/>
Is it possible to make a radio button 'unclickable'/ 'unselectable' without 'disabling' it?
For aesthetic reasons I need to know if this is possible and how it might be achieved.
Current code as follows:
<input name='example' value='1' type='radio'/>
<input name='example' value='2' checked='checked' type='radio'/>
<input name='example' value='3' type='radio'/>
<input name='example' value='4' type='radio'/>
<input name='example' value='5' type='radio'/>
Share
Improve this question
asked Jun 16, 2014 at 20:53
Homer_JHomer_J
3,32312 gold badges47 silver badges67 bronze badges
12
-
What's wrong with
disabled
? – marekful Commented Jun 16, 2014 at 20:59 - @MarcellFülöp - it 'greys out' the radio button, so, ideally, I'm looking for a solution that works like 'disabled' but keeps the look of the original radio button. – Homer_J Commented Jun 16, 2014 at 21:00
- I don't know what you're doing, but it's almost always (99%) best to just go with what the user's familiar with. You may have aesthetic concerns but breaking their concepts about clickable radio buttons may be even more of a nuisance. – bbill Commented Jun 16, 2014 at 21:07
- 1 @bbill - appreciate the feedback - this is being used as an 'example' - i.e. a set of instructions so the user can see how to plete a form. Hence why I need them to 'look' the same but don't want the user to be able to actually click/ change anything. – Homer_J Commented Jun 16, 2014 at 21:09
- 2 If that is your endgame, check out the edit to my post :) I'm off now, good luck – Martijn Commented Jun 16, 2014 at 21:31
5 Answers
Reset to default 5To preserve the checked/unchecked state of the radio inputs without using disabled
(which would be far simpler), you could use the following:
// select the relevant radio input elements:
$('input[name="example"]')
// bind a change-event handler using 'on()':
.on('change', function(){
// re-select the same elements:
$('input[name="example"]')
// set the 'checked' property back to the default (on page-load) state:
.prop('checked', function(){
return this.defaultChecked;
});
});
JS Fiddle demo.
References:
- Attribute-equals (
[attribute="value"]
) selector. on()
.prop()
.
Based on one of your ments on your question ( you dont want to submit them, but show them a result/preview form), an edit to this post (original below):
Don't wrap the elements in a form. If you don't need submitting, remove the form from it and all elements will look the same, but wont submit anything. Don't give any of the inputs a name, ét voila.
You can counter the default action from a lot of elements with preventDefault():
$('input[name="example"]').click(function(e){
e.preventDefault();
});
The way I use the name attribute isnt limited to the name. You can select all achors based on href: $('a[href="/example"]')
, or any other attribute. It's worth to note that adding a class and select based on class will be faster than basing it on property, but always use at least a tagname to limit the selector.
With a small jsFiddle demo.
e.preventDefault()
prevents more than a click. You can use it:
$('a').on('click', function(e){ e.preventDefault(); /* eg use pushstate safely now */}); // hijack anchors
$('form').on('submit', function(e){ e.preventDefault(); /* eg trigger custom validation here*/}); // stop submitting
Based in Ciel's topic, I got a third one, cssbased. This will add an invisible 'section' (might need to add a z-index) over the radiobutton. This requires no Javascript or html changes:
input[type="radio"]{
position: relative;
z-index: 1;
}
input[type="radio"]:after{
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
Have you tried using pointer-events: none ? It prevents mouse clicks from doing anything.
https://developer.mozilla/en-US/docs/Web/CSS/pointer-events
input[name="example"] {
pointer-events: none;
}
If you really have to... This hack works. http://jsfiddle/TTwbB/363/
$(':radio').click(function(){
this.checked=false;
});
You could also listen to the change
event if you want more flexibility.
The best way I have found to do this is to simply place a little invisible "block" over it.
<div style="position: relative;">
<input type="checkbox" style="position: absolute; top: 0; left; 0;" />
<span style="position: absolute; top: 0; left: 0; width: 24px; height: 24px; display: block; z-index: 2; background: transparent; content: " ";"> </span>
</div>
This just covers it with a little layer that they can't click through, but it isn't fool proof.
Here is a working example. It isn't much, and it leaves a lot to be desired, but if you contain your whole checkbox
in the same div
and give them some class identifiers, it is pretty simple to use jQuery or other tools to arrange these as you want to if they need to shuffle around.
jsBin - 'Cover' checkbox
This isn't very good, as I'm scrambling around trying to find it, but my repository isn't responding right now, but this is the gist of how I do it independently. I'm a fan of using non-value attributes, you can do it in a lot of different ways. I am using LESS right here, if you want the CSS, you should be able to click on the dropdown option to have it pile to pure CSS.
jsBin - 'Skinnable' checkboxes
In my actual project I have it a lot larger in scope, but basically you can declare any containing element as skinnable
, and it'll establish the rudimentary features. If you want an input to be blocked, but visible, you declare it obstructed
, and then you mark whatever you want to block it with with obstruction
.
I have obviously cheesed this sample just a bit, as my actual repository doesn't seem to be responding, so if I can get to it I'll update this post a bit later.
HTML
<div skinnable>
<input type="checkbox" obstructed />
<span obstruction>
<div skinned>
</div>
</span>
</div>
LESS
div[skinnable] {
position: relative;
input[obstructed] {
top: 0;
left: 0;
z-index: 1
}
div[obstruction],
span[obstruction]{
position: absolute;
width: 24px;
height: 24px;
display: block;
background: transparent;
content: " ";
top: 0;
left: 0;
z-index: 2;
}
div[skinned],
span[skinned] {
background: blue;
width: inherit;
height: inherit;
z-index: 3;
display: block;
content: " ";
}
div[green] {
background-color: green;
}
}
So you can basically set up skinned
to be anything you want. If you decide you want to work with 3rd party libraries, like iCheck
, you can easily hide
or show
by these attributes.
$('[obstruction]').hide();
You can do a lot of amazing things with this, I've only shown blocking them with colored blocks, but honestly it's pretty endless.
If you want them to be interactive and skinned, then you can remove the obstructed
attribute, and use the obstruction
attribute for interaction.
$('[obstruction]').on('click', function(e) {
$(e).closest('input').checked(); // you can easily interact with them!
});