Created
September 18, 2018 16:50
-
-
Save brianmfear/364d451ec5aaf33fb2f50705e1babc2f to your computer and use it in GitHub Desktop.
Disable button when all select options selected (Lightning)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:application > | |
<aura:attribute name="opts" type="String[]" default="['A','B','C']" /> | |
<aura:attribute name="disableButton" type="Boolean" default="false" /> | |
<select aura:id="picklist" onchange="{!c.updateButtonState}" multiple="multiple"> | |
<aura:iteration items="{!v.opts}" var="opt"> | |
<option value="{!opt}">{!opt}</option> | |
</aura:iteration> | |
</select> | |
<lightning:button label="Test Button" disabled="{!v.disableButton}" /> | |
</aura:application> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
updateButtonState: function(component, event, helper) { | |
// Get the select options | |
let items = component.find("picklist").getElement().options; | |
// Set to disabled when all options selected | |
component.set("v.disableButton", Array.prototype.every.call(items, option => option.selected)); | |
// NOTE: This code also re-enables button when one item is deselected. | |
// If not desirable, you will need to slightly modify this code. | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment