Search code examples
csscheckboxrichfaces

Checkbox disabled=false whithout having focus


Consider the following situation: There exists a column in a table with label "X". X contains a checkbox, which can be checked or unchecked. To be more precise here is the code:

<h:form id="form">
  <rich:dataTable id="table"
    <rich:column>
      <f:facet name="header">
        <h:outputLabel value="X" />
          </f:facet>
            <h:selectBooleanCheckbox id="x" readonly="true"
              disabled="true"
              value="#{some condition}"
              styleClass="#{foo() ? 'inputChanged' : '' center" />
              .
              .
              .

The problem i got is: It is not quite clear to decide wether the checkbox is checked or not. The problem is, that the checkbox has to be disabled, else it gets focussed and one can click the check box. Even though this does not have any impact on the data in the backend, i don't want this to happen. The costumer told me, that you cant decide quite well, if the checkbox is marked or not.

Is there a way to get the checkbox not disabled while a user can't make any changes? Or do you have any other idea how to make this more visible to a costumer?


Solution

  • The following worked:

    input[type=checkbox]:not(:checked) {
        outline:2px solid red;
    }
    

    This way, you can override the style of an unchecked checkbox so that it has a red border.