how to make Checkbox ReadOnly in Web application

问题

I have a gridview with a checkbox in every row. When put into Edit mode the Checkbox can be checked/unchecked; but I don't want the checkbox to be editable in any other mode. The user easily might get confused by checked boxes that do not reflect the real values saved back in the database.

<asp:CheckBox id="checkboxCustomerRequired" runat="server" Checked='<%# Bind("CustomerRequired") %>' Enabled="false" CssClass="Check"/>

Possible workarounds I tried:
1) Setting enabled = false

This achieves the goal, but the greyed out box is ugly and prevents from capturing it's state in one glance. Therefore I tried to set the forecolor of the box in the OnRowDataBound Event back to white, but it doesn't work. Checkbox.ForeColor = System.Drawing.Color.White;2) Using OnCheckedChange EventThe idea is to set it's state back once it had been changed. The problem is that I'm moving within a gridview and I can't figure out how to establish the row in which the Checkbox Click had occurred. This doesn't seem to be possible in the given situation.Any suggestions? Martin

回答1:

You can make the CheckBox read-only by returning false in the onclick client-side event:

<asp:CheckBox ID="checkboxCustomerRequired" runat="server" onclick="return false;" ... />

回答2:

Have you tried syling the disabled state with CSS, so it's disabled but still looks the way you want it to?

input[type=checkbox][disabled]{
  outline:1px solid red; // or whatever
}

回答3:

The checkbox appearance of a disabled is being controlled by the browser. It is not advisable to tamper with this since it will look different in each browser; An appearance users are probably already familiar with. See the comparison below for how each browser and OS will display a disabled checkbox.

If you really want to unify the style of the checkbox, you can create a stylesheet that overrides the various attributes (background, border, etc.) and apply them to the :disabled state.

input[type=checkbox]:disabled {
  -webkit-appearance: none; /* disable chrome and safari styles */
  width: 12px;
  height: 12px;
  background: white;
  border: solid 1px black;
  vertical-align: middle;
}

<input type="checkbox" disabled>
<label>This is a checkbox</label>

来源：https://stackoverflow.com/questions/39134057/how-to-make-checkbox-readonly-in-web-application

标签

ASP.NET

checkbox