html复选框不可修改,HTML复选框可以设置为只读吗？

you can use this:

This works because returning false from the click event stops the chain of execution continuing.

READONLY doesn't work on checkboxes as it prevents you from editing a field's value, but with a checkbox you're actually editing the field's state (on || off)

It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don't change the value of the field.

If you don't want to use disabled but still want to submit the value, how about submitting the value as a hidden field and just printing its contents to the user when they don't meet the edit criteria? e.g.

// user allowed change

if($user_allowed_edit)

{

echo ' Check value';

}

else

{

// Not allowed change - submit value..

echo '';

// .. and show user the value being submitted

echo ' Check value';

}

This is a checkbox you can't change:

Just add disabled="disabled" as an attribute.

Edit to address the comments:

If you want the data to be posted back, than a simple solutions is to apply the same name to a hidden input:

This way, when the checkbox is set to 'disabled', it only serves the purpose of a visual representation of the data, instead of actually being 'linked' to the data. In the post back, the value of the hidden input is being sent when the checkbox is disabled.

But you absolutely MUST validate the data on the server to ensure it hasn't been changed.

another "simple solution":

disabled="disabled" / disabled=true

This presents a bit of a usability issue.

If you want to display a checkbox, but not let it be interacted with, why even a checkbox then?

However, my approach would be to use disabled (The user expects a disabled checkbox to not be editable, instead of using JS to make an enabled one not work), and add a form submit handler using javascript that enables checkboxes right before the form is submitted. This way you you do get your values posted.

ie something like this:

var form = document.getElementById('yourform');

form.onSubmit = function ()

{

var formElems = document.getElementsByTagName('INPUT');

for (var i = 0; i , formElems.length; i++)

{

if (formElems[i].type == 'checkbox')

{

formElems[i].disabled = false;

}

}

}

with jquery:

$(':checkbox[readonly]').click(function(){

return false;

});

it still might be a good idea to give some visual hint (css, text,...), that the control won't accept inputs.

I used this to achieve the results:

I happened to notice the solution given below. In found it my research for the same issue.

I don't who had posted it but it wasn't made by me. It uses jQuery:

$(document).ready(function() {

$(":checkbox").bind("click", false);

});

This would make the checkboxes read only which would be helpful for showing readonly data to the client.

οnclick="javascript: return false;"

will work for you , I am using this

Some of the answers on here seem a bit roundabout, but here's a small hack.

​

then in jquery you can either choose one of two options:

$(document).ready(function(){

//first option, you don't need the disabled attribute, this will prevent

//the user from changing the checkbox values

$("input[name^='chkBox_1']").click(function(e){

e.preventDefault();

});

//second option, keep the disabled attribute, and disable it upon submit

$("#submitBttn").click(function(){

$("input[name^='chkBox_1']").attr("disabled",false);

$("#aform").submit();

});

});

​

Building on the above answers, if using jQuery, this may be an good solution for all inputs:

$(function () {

$('.readonly input').attr('readonly', 'readonly');

$('.readonly textarea').attr('readonly', 'readonly');

$('.readonly input:checkbox').click(function(){return false;});

$('.readonly input:checkbox').keydown(function () { return false; });

});

I'm using this with Asp.Net MVC to set some form elements read only. The above works for text and check boxes by setting any parent container as .readonly such as the following scenarios:

I would have commented on ConroyP's answer, but that requires 50 reputation which I don't have. I do have enough reputation to post another answer. Sorry.

The problem with ConroyP's answer is that the checkbox is rendered unchangeable by not even including it on the page. Although Electrons_Ahoy does not stipulate as much, the best answer would be one in which the unchangeable checkbox would look similar, if not the same as, the changeable checkbox, as is the case when the "disabled" attribute is applied. A solution which addresses the two reasons Electrons_Ahoy gives for not wanting to use the "disabled" attribute would not necessarily be invalid because it utilized the "disabled" attribute.

Assume two boolean variables, $checked and $disabled :

if ($checked && $disabled)

echo '';

echo '

$checked ? 'checked="checked" ' : '',

$disabled ? 'disabled="disabled" ' : '', '/>';

The checkbox is displayed as checked if $checked is true. The checkbox is displayed as unchecked if $checked is false. The user can change the state of the checkbox if and only if $disabled is false. The "my_name" parameter is not posted when the checkbox is unchecked, by the user or not. The "my_name=1" parameter is posted when the checkbox is checked, by the user or not. I believe this is what Electrons_Ahoy was looking for.