4

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
Barnabeck
  • 459
  • 1
  • 6
  • 26
  • I am not understanding the scenario exactly. are you wanting to disable the check box once it is clicked? – DaniDev Aug 24 '16 at 22:43
  • No, I don´t wont it to be clicked at all. Only if the row is put into edit mode this should be achieved. – Barnabeck Aug 24 '16 at 22:47

3 Answers3

17

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;" ... />
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
0

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
}
Seano666
  • 2,238
  • 1
  • 15
  • 14
0

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.

enter image description here

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>
Soviut
  • 88,194
  • 49
  • 192
  • 260