Liferay alloy button enable/disable - liferay-6

Question

I am trying to get a simple button to be enabled/disabled when checkboxes are being selected, yet in Alloy UI within Liferay, it doesnt seem to work. Any suggestions?
<aui:form>
<aui:input checked="<%= true %>" cssClass="input-container" label="Decline" name="termsOfServiceRadio" type="radio" onClick='<%= renderResponse.getNamespace() + "disableCheckout();"%>'/>
<aui:input cssClass="input-container" label="Accept" name="termsOfServiceRadio" type="radio" onClick='<%= renderResponse.getNamespace() + "enableCheckout();"%>'/>
<aui:button-row>
<aui:button type="submit" name="submitButton" id="submitButtonID" disabled="true" />
</aui:button-row>
</aui:form>
<aui:script>
function <portlet:namespace />enableCheckout() {
document.<portlet:namespace />fm.<portlet:namespace />.getElementById("submitButtonID").disabled = false;
}
function <portlet:namespace />disableCheckout() {
document.<portlet:namespace />fm.<portlet:namespace />.getElementById("submitButtonID").disabled = true;
}
</aui:script>
To continue my trials with no success:
<aui:script>
function <portlet:namespace />enableCheckout() {
var mySubmittButton = A.one('#<portlet:namespace />submitButton');
mySubmittButton.set('disabled', false);
mySubmittButton.ancestor('.aui-button').removeClass('aui-button-disabled');
}
</aui:script>
<aui:script use="aui-base">
function <portlet:namespace />enableCheckout() {
var A = AUI();
var myBtn = A.one('.submitVisible-button');
myBtn.one(':button').attr('disabled', false);
myBtn.toggleClass('aui-button-disabled', false);
}
</aui:script>
<
<aui:button type="submit" name="submitButtonID" id="submitButtonID" cssClass="submitVisible-button" disabled="true" />
<aui:script use="aui-base">
Liferay.provide(
window,
'<portlet:namespace />enableCheckout',
function() {
var myButton = A.one('#<portlet:namespace />submitButtonID');
Liferay.Util.toggleDisabled(myButton, 'true');
myButton.set('disabled', false);
myButton.ancestor('.aui-button').removeClass('aui-button-disabled');
});
</aui:script>
<aui:script use="aui-base">
Liferay.provide(
window,
'<portlet:namespace />enableCheckout',
function() {
var A = AUI();
var myButton = A.one('#<portlet:namespace />submitButtonID');
Liferay.Util.toggleDisabled(myButton, true);
});
</aui:script>

Answer 1

So it appears you want to enable/disable submitButtonID based on termsOfServiceRadio.
You have several variations of essentially the same approach available. The basic concept is to assign click listeners to each radio button setting the state of the button based only on the "Accept" option being "checked". You can use either an id attribute to apply the listeners individually or some css class that will allow you to get both input elements at once and apply the listeners through the each method. A third option is to use the delegate function, which would require that you wrap the radio options in a "container".
YUI().use('aui-base', function(A){
var button = A.one('#mySubmitButton');
button.set('disabled', true);
var func = function(){button.set('disabled', !A.one('#AcceptRadioId').get('checked'));}
A.all('.tosRadioOption').each(function(node){
node.on('click', func)
})
})
Ultimately the set method using the disabled property on the submitButtonID node is the key components required to achieve the desired functionality. My fiddle contains the three approaches I mentioned. Considering you are using the aui taglib elements you'll need to prefix the ids with <portlet:namespace /> as you have done in some of your other attempts.

Answer 2

Ended up doing this a different way
<aui:form>
<aui:input checked="<%= true %>" cssClass="input-container" label="Decline" name="termsOfServiceRadio" type="radio" onClick="document.getElementById('test').style.visibility = this.checked ? 'hidden' : 'visible';"/>
<aui:input cssClass="input-container" label="Accept" name="termsOfServiceRadio" type="radio" onClick="document.getElementById('test').style.visibility = this.checked ? 'visible' : 'hidden';" />
<div id="test" style="visibility:hidden;">
<br/>
<strong>Choose a payment method:</strong>
<br/><br/>
<aui:input checked="<%= true %>" cssClass="input-container" label="Pay online with PayPal" name="paymentMethod" type="radio" onClick='<%= renderResponse.getNamespace() + "setPaypal();"%>'/>
<aui:input cssClass="input-container" label="Pay with check or wire transfer" name="paymentMethod" type="radio" onClick='<%= renderResponse.getNamespace() + "setOffline();"%>'/>
<aui:button-row>
<aui:button type="submit" name="submitButtonID" id="submitButtonID" cssClass="submitVisible-button" value='<%= shoppingPrefs.usePayPal() ? "continue" : "finished" %>' />
</aui:button-row>
</div>