2

I am trying to use Checkbox Alternate Lightning code as a code of CheckboxAlternate component

<aura:component >
    <fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-checkbox--button-group">
      <span class="slds-button slds-checkbox--button" for="monday">
        <input type="checkbox" name="checkbox" id="monday" />
        <label class="slds-checkbox--button__label" for="monday">
          <span class="slds-checkbox--faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="tuesday">
        <input type="checkbox" name="checkbox" id="tuesday" />
        <label class="slds-checkbox--button__label" for="tuesday">
          <span class="slds-checkbox--faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="wednesday">
        <input type="checkbox" name="checkbox" id="wednesday" />
        <label class="slds-checkbox--button__label" for="wednesday">
          <span class="slds-checkbox--faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="thursday">
        <input type="checkbox" name="checkbox" id="thursday" />
        <label class="slds-checkbox--button__label" for="thursday">
          <span class="slds-checkbox--faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="friday">
        <input type="checkbox" name="checkbox" id="friday" />
        <label class="slds-checkbox--button__label" for="friday">
          <span class="slds-checkbox--faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>
</aura:component>

and I have CheckboxAlternateApp where I use this component multiple time (in my case I use it three times.

I receive unexpected results displayed in this video GIF image.

enter image description here

When I click on the first instance it works well, but when I click on the the second and the third instances it doesn't display selected checkboxes of that instance correctly but instead unchecks or checks the checkboxes of the first instance.

Does anyone know a way to overcome this and make this work correctly?

1

I found so far the following solution.

I changed the code of my application to the following one:

<aura:application extends="force:slds">
    <c:CheckboxAlternate ix="1"/>
    <c:CheckboxAlternate ix="2"/>
    <c:CheckboxAlternate ix="3"/>
</aura:application>

and I changed the code of the component to this one:

<aura:component >
    <aura:attribute name="ix" type="String" />
    <fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-checkbox--button-group">
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'monday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'monday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'monday'}">
          <span class="slds-checkbox--faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'tuesday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'tuesday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'tuesday'}">
          <span class="slds-checkbox--faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'wednesday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'wednesday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'wednesday'}">
          <span class="slds-checkbox--faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'thursday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'thursday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'thursday'}">
          <span class="slds-checkbox--faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="{!v.ix+'friday'}">
        <input type="checkbox" name="checkbox" id="{!v.ix+'friday'}" />
        <label class="slds-checkbox--button__label" for="{!v.ix+'friday'}">
          <span class="slds-checkbox--faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>
</aura:component>

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.