CODEWITHSUNDEEP
javascriptjqueryradio-button
Homer_J
Homer_J

Reputation: 3323

jQuery Make Radio Button not clickable

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

Upvotes: 3

Views: 8167

Answers (5)

Michael
Michael

Reputation: 7374

Have you tried using pointer-events: none ? It prevents mouse clicks from doing anything.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

input[name="example"] {
  pointer-events: none;
}

Upvotes: 3

Ciel
Ciel

Reputation: 4440

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 compile 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!
});

Upvotes: 1

Martijn
Martijn

Reputation: 16103

Based on one of your comments 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;
}

Upvotes: 4

David Thomas
David Thomas

Reputation: 253308

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

Upvotes: 5

bbill
bbill

Reputation: 2304

If you really have to... This hack works. http://jsfiddle.net/TTwbB/363/

$(':radio').click(function(){
    this.checked=false;
});

You could also listen to the change event if you want more flexibility.

Upvotes: 2

Related Questions