Label is clickable

JavaScript
1

Hello Folks,

Input have checked attribute, still I can able to click on the label to make an action. how can i prevent click on label?

$('#myDiv').fancybox({
//method goes here
});

<div class="myClass">
<label for="myDiv">text1</label>
<input type="radio" id="myDiv" name="cart1" checked/>
<span id="text2" class="cart2"></span>
</div>
2

The label is meant to be clickable. Why do you want to prevent this?

3

By default if radio is checked we can’t click again, based on that the label for attr and input radio id are same so it should not be clickable.

4

you can click a radio button as often as you want, but a checked radio button cannot be unchecked this way.

5

Yes, once you make a selection, you can’t unselect, only change to another selection.

6

.[quote=“Dormilich, post:4, topic:233236”]
but a checked radio button cannot be unchecked this way.
[/quote]

In this scenario the label shouldn’t be clickable right, but I can able to click. How can I prevent that click?

7

The label for that individual radio button should be clickable, but not the label for the radio group.

8

What problem occurs when it is clicked again?

Perhaps if you help us to understand that problem, we can provide a suitable solution for you.

1 Like
9

To prevent the clicking of any object in a website, you really only need 1 line of CSS:

#ObjectDivID {pointer-events: none;}

or, of course (same thing):

#ObjectDivID {
 pointer-events: none;
}
1 Like
10

@Paul_Wilkins: While clicking on the input radio opening a fancybox, which contains product list, by slecting any product closing the fancybox and populating the product details to the parent page. At that time i am making the radio checked and it shouldn’t be clickable again, but I am unable to prevent that click.

11

Yeah Moz, it shouldn’t work in below IE11, anyways thanks for your quick fox fix…:stuck_out_tongue_winking_eye:

12

It seems then that the radio button is the wrong choice for the process that you are doing.

Radio buttons inform the user that there are multiple choices from which only once choice is allowed.
Checkboxes however fit your use-case much better, as they are individually either on or off.

Regardless of whether you take this advice to improve the interface for your users, there is an HTML attribute called “disabled” that you can set on form fields, including radio and check boxes, that prevent them from being interacted with again.

Knowing that, a solution now presents itself. Looking at the fancybox documentation (it’s handy stuff that), there are some callbacks such as afterLoad and beforeClose. We can use that to disable the form field, regardless of whether that be a radio button, checkbox, or whatever.

$("#myDiv").fancybox({
  afterShow: function preventSecondOpening() {
    $("#myDiv").prop("disabled", "disabled");
  }
});
13

Thanks @Moz. It’s nice knowing that there are multiple paths towards a solution.
Ideally the chosen solution is one that most clearly explains why it is being done in the first place.

14

@Paul_Wilkins: Thanks for you prompt response and solution. Yes there is either case means there are 2 radio buttons of same kind and are belongs to same group to make choice.

15

If you have several radio buttons of the same name that you want to disable, the following will achieve that:

var name = $("#myDiv").attr("name");
$("[name='" + name + "']").each(function () {
    this.prop("disabled", "disabled");
});
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.