Checkboxes Remain Ticked If Untick

Question

I want to make checkboxes so they should remain ticked even if someone try to untick them. My HTML is;

<fieldset class="trow2">
<legend><strong>{$lang->account_prefs}</strong></legend>
<table cellspacing="0" cellpadding="{$theme['tablespace']}" width="100%">
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="allownotices" id="allownotices" value="1" {$allownoticescheck} /></td>
<td valign="top"><span class="smalltext"><label for="allownotices">{$lang->allow_notices}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="receivepms" id="receivepms" value="1" {$receivepmscheck} /></td>
<td valign="top"><span class="smalltext"><label for="receivepms">{$lang->receive_pms}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="pmnotice" id="pmnotice" value="1"{$pmnoticecheck} /></td>
<td valign="top"><span class="smalltext"><label for="pmnotice">{$lang->pm_notice}</label></span></td>
</tr>
<tr>
<td valign="top" width="1"><input type="checkbox" class="checkbox" name="emailpmnotify" id="emailpmnotify" value="1" checked="checked" {$emailpmnotifycheck} /></td>
<td valign="top"><span class="smalltext"><label for="emailpmnotify">{$lang->email_notify_newpm}</label></span></td>
</tr>
<tr>
<td colspan="2"><span class="smalltext"><label for="subscriptionmethod">{$lang->subscription_method}</label></span></td>
</tr>
<tr>
<td colspan="2">
    <select name="subscriptionmethod" id="subscriptionmethod">
        <option value="2" {$instant_email_subscribe_selected}>{$lang->instant_email_subscribe}</option>
    </select>
</td>
</tr>

</table>
</fieldset>

If I try to use DISABLED attribute in input tag then the value can't pass through the script, and on the other hand I do not want to use HIDDEN attribute in input because it hides the checkboxes which I do not want to do like that, I want to show checkboxes, ticked by default but the users shouldn't able to untick them.

I'm satisfied if someone provide me the solution using jQuery.

Please help!

Well.. There are an article http://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly It should help you ;) — JDSolutions, Dec 27 '13 at 16:40

score 2 · Accepted Answer · answered Dec 27 '13 at 16:41

2

Try this for all checkboxes:

<input type="checkbox"  checked="checked" onclick="return false" />

Output: http://jsfiddle.net/Zword/HKML5/

answered Dec 27 '13 at 16:41

Zword

6,605
3
27
52

You guys are awesome! Thank You Zword, your solution has little code but effective! :) – user2854563 Dec 27 '13 at 16:43
Accept answer if its what you needed @user2854563 – Zword Dec 27 '13 at 16:44
2

@user2854563 the only thing is it doesn't allow someone to initially tick the box...? – Adjit Dec 27 '13 at 16:44
Oh i forgot that @user2854563 – Zword Dec 27 '13 at 16:46
1

@metsales i answered for what the user asked for. – Zword Dec 27 '13 at 16:47
1

@Zword wasn't saying you were wrong, was just trying to make sure its what the OP wanted – Adjit Dec 27 '13 at 16:48

score 0 · Answer 2 · edited May 23 '17 at 10:32

Since you're open to using jQuery, try:

$('input[checked=checked]').click(function() {return false;});

That will prevent clicks from registering on the input itself. You may need to add a similar handler on the label since browsers will change input state with clicks there as well.

But, there's still a question whether this is really the best approach. See the discussions here: Can HTML checkboxes be set to readonly?

score 0 · Answer 3 · answered Dec 27 '13 at 16:44

0

When user tries to change the checkbox value to false, the change event is triggered you can always set it to true using prop

$("input[type=checkbox]").change(function(){
     $(this).prop("checked",true);
})

answered Dec 27 '13 at 16:44

niko

9,285
27
84
131

Checkboxes Remain Ticked If Untick

3 Answers3