重定向点击 如果 JavaScript 被禁用，否则检查子单选按钮

Question

I have a radio button within a link:

<label class="dd--option">
    <a href="someURL" class="dd--noscript--link">
        <input name="dd_radio" type="radio" class="dd--radio dd--radio--js" checked />
        <span class="dd--label">
            <img class="dd--label--image" src="http://90.0.0.91/show.php/swatch/23080/black"/>
            <span class="dd--label--text">Black</span>
        </span>
    </a>                    
</label>

I want to achieve the following:

• If JavaScript is disabled on browser, I want to redirect to the link given in href attribute of the anchor tag .
• If JavaScript is enabled, It should not redirect anywhere. It should only check the radio button .

Can I able to achieve it? If Yes, How ?

Answer 1

Not 100% sure if the clicking on an <input> will automatically bubble event up to a parent <a> in every browser, but if so, this should do it:

$('.dd--noscript--link').on('click', function(e) {
    e.preventDefault();
});

As @Barmar mentioned in the comments, with JS disabled, href="#" would not cause the browser to load a new page.

Answer 2

Add a Javascript event handler on the radio button, and use event.stopPropagation() .

$(".dd--radio--js").click(function(e) {
    e.stopPropagation();
});

If Javascript is enabled, this function will be executed, and stopPropagation() will prevent the click from bubbling to the anchor, so it won't follow the link.

If Javascript is disabled, this code won't be executed, so the click will bubble out to the anchor, and the link will be followed.