SLDS and inputField checkbox

Question

So, the SLDS says that a checkbox must be done like this:

<div class="slds-form-element">
  <label class="slds-checkbox" for="checkboxSample1">
    <input name="checkbox" type="checkbox" id="checkboxSample1" />
    <span class="slds-checkbox--faux"></span>
    <span class="slds-form-element__label">Checkbox Label</span>
  </label>
</div>

that is all well and good and it works.

BUT how the heck do you do it with an apex:inputField???

This produces the correct looking UI but you cannot check or uncheck the box

<div class="slds-form-element">
    <label class="slds-checkbox" for="provider_contacted">

        <apex:inPutField id="provider_contacted" value="{!loc.Provider_Contacted__c}"/>
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">Provider Contacted</span>

    </label>

</div>

and if you attempt to do this:

<div class="slds-form-element">
    <label class="slds-form-element__label" for="received">
        Received
    </label>

    <apex:inPutField id="received" value="{!loc.Received__c}"
                     styleClass="slds-checkbox slds-input slds-form-element__control"/>

</div>

It renders as follows (loosing SLDS styling)

So my question:

Q: How do you style an <apex:inputCheckbox> like a SLDS checkbox

Current Solution

Remove the for= from the label duh

Doing it this way, but is there a way that does not require JS for every element?

<div class="slds-form-element">
    <label class="slds-checkbox" for="provider_contacted">

        <apex:inPutField id="provider_contacted" value="{!loc.Provider_Contacted__c}"/>
        <span class="slds-checkbox--faux" onclick="toggleCheckbox($('[id$=provider_contacted]'));"></span>
        <span class="slds-form-element__label">Provider Contacted</span>
    </label>

</div>

    <script>
        function toggleCheckbox(e){
            $(e).prop("checked", !(e).prop("checked"));
        }
    </script>

Answer 1

Eric Edit

The answer provided by Ashwani is the correct way to do it. However, the actual reason for my issue in the question was that I had left the for= in the label. If you take this answer and add a for=xxx to the label you will notice what I saw in my original question.

This answer gave the proof of concept that it worked as I thought it should. I would have never taken another look at it otherwise so thank you....

End Edit

I did it this way and worked perfectly. You need to give styleclass="slds-input" attribute for inputField/inputCheckbox(Eric note: This is best practice but striking just to highlight that it was not the reason for what I saw).

     <div class="slds-form-element__row">
       <div class="slds-form-element">
          <label class="slds-checkbox">
                <apex:inputcheckbox id="isinstance" styleclass="slds-input" value="{!isSameInstance}" />
                   <span class="slds-checkbox--faux"></span>
                   <span class="slds-form-element__label">Are you Tier 3?</span>
          </label>
       </div>
    </div>