jQuery checkbox uncheckable:

Question

I have a checkbox in a table:

<td>
    <input name="feature1" type="checkbox" value="1"/>
</td>

I want this checkbox uncheckable what's better way to do this? Since I do not want to use prop.("disabled"), cause it will turn checkbox to the gray.

Then I try to use :

$('input[type="checkbox"][name="feature1"]:first').on("click", true)

but if I want to turn this checkbox checkable again, and click the checkbox

$('input[type="checkbox"][name="feature1"]:first').on("click", true)

it will send error like this : jquery-2.2.4.min.js:3 Uncaught TypeError: ((n.event.special[g.origType] || {}).handle || g.handler).apply is not a function at HTMLInputElement.dispatch (jquery-2.2.4.min.js:3:7537) at r.handle (jquery-2.2.4.min.js:3:5620)

Just new to Jquery, is there a better way to set up this ?

Using the `disabled` attribute is the correct way to do it. It's supposed to be grayed out so that people understand it's not clickable. Why would you want a control that looks like it works but doesn't? — Josh, Feb 24 '23 at 17:52
*"Since I do not want to use prop.("disabled"), cause it will turn checkbox to the gray."* That's a **good thing**. It's **user feedback** letting them know that the box isn't available at the moment. The `disabled` state is also **important for accessibility**. Bypassing it is not a good idea. If you wan tto do some custom styling of it, that's fine, style it in the [`:disabled` state](https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled) to better match your overall theme, but don't completely mess up the semantics of your page/app. — T.J. Crowder, Feb 24 '23 at 17:54
@Josh yeah, i just want to try different style. But thanks for letting me know. — Shen Henry, Feb 24 '23 at 18:06

score 1 · Accepted Answer · answered Feb 24 '23 at 17:46

You can set the CSS property pointer-events: none so that clicks are not responded to.

$('input[type="checkbox"][name="feature1"]:first').css('pointer-events', 'none');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
    <input name="feature1" type="checkbox" value="1"/>
</td>

jQuery checkbox uncheckable:

1 Answers1