3

I am not talking about <ui:inputCheckBox>. Suppose I am using slds in VF page and below is the sample code:

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <span class="slds-checkbox">
                    <input type="checkbox" name="options" id="isactive-checkbox" checked="{!conn.is_Active__c}" disabled="true" />
                    <label class="slds-checkbox__label" for="isactive-checkbox">
                        <span class="slds-checkbox--faux"></span>
                        <span class="slds-form-element__label">is Active</span>
                    </label>
                </span>
            </div>
        </div>

This code won't work for setting the default value. checked="{!conn.is_Active__c}" will simply not work. It will always be checked.

I can setup the checked attribute using javascript but I am wondering whether it is the only option. And plus, <apex:inputField> doesn't seem to work very well in the checkbox scenario.

3
5

When using the SLDS Checkbox along with an input field the checkbox works as expected and will default as appropriate when done like this:

<div class="slds-form-element slds-align--absolute-center">
    <label class="slds-checkbox">
        <apex:inputCheckbox styleClass="slds-input"
                            value="{!Account.Owner.isActive}"
        />
        <span class="slds-checkbox--faux"></span>
    </label>
</div>

Is an example of using it on a page with an Account Standard Controller..

See what I found here: SLDS and inputField checkbox

You need to wrap the input in the label and remove the for attribute. If you do not remove the for attribute the behavior of the checkbox is not as expected.

The documentation around placing the input inside the label tag is on the Lightning Site and is summarized below:

To remain accessible to all user agents, place <input> with type="checkbox" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-checkbox--faux class

7
  • This is brilliant approach. I will try it out – Lance Shi Nov 8 '16 at 3:15
  • @LanceShi - If you have any issues I will post a full example with page, template, etc. I know it works because I use it all the time :) so don't give up – Eric Nov 8 '16 at 3:16
  • @LanceShi - Also, when you really get into it and want to do an autocomplete component for VF SLDS take a look at my accepted answer here: salesforce.stackexchange.com/questions/144442/… - I think I have solved all the little quirks I did not like with other solutions. If you have any issues with it let me know as not sure how the posted code translates into use outside of my environment and may need some tweaks for your specific situation – Eric Nov 8 '16 at 3:17
  • Thank you so much for those information. Really, really helpful. I think I should be fine with the code. I am actually a clever person:) – Lance Shi Nov 8 '16 at 3:19
  • @LanceShi - I just meant that - for me - it helps to know something works or I will be chasing different solutions when the original way just needed a small tweak. – Eric Nov 8 '16 at 3:22
0

Checkboxes don't behave the way you think they do. When the "checked" attribute is set, it only affects the value on load. Technically, most browsers implement it like this: if the checked attribute is on the input element, it's checked, otherwise it's not. As such, you can't really directly bind to the checked attribute, it simply won't work. Instead, you can use ui:inputCheckbox:

<ui:inputCheckbox value="{!conn.is_Active__c}" disabled="true" />

Of course, if your intent is to always have the checkbox be disabled, use ui:outputCheckbox instead.

There are ways to read this value in your controller, but simply binding to a plain input element won't work the way you expect without writing more code than just that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.