Should be simple, button enable/disable

[Chris Tantalo，修改在9 年前。]

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>

After a little research, I have also tried this script but this didnt work either:
<aui:script>

function <portlet:namespace />enableCheckout() {
var mySubmittButton = A.one('#submitButtonID');
mySubmittButton.set('disabled', false);
mySubmittButton.ancestor('.aui-button').removeClass('aui-button-disabled');
}

</aui:script>

[Jonathan Mak，修改在9 年前。]

Hi Chris,

If you look in /portal-web/docroot/html/js/liferay/util.js, there are numerous methods which allow you enable/disable buttons and form fields. Two methods which might make it easier for you to enable and disable buttons in your form might be disableFormButtons and enableFormButtons. If you are just enabling and disabling buttons, you can take a look at the toggleDisabled function to see if that fits your needs as well.

I hope this helps!

[Chris Tantalo，修改在9 年前。]

Hi Jonathan,

Just tried the following to no avail, what am i missing?

<aui:script>
var A=new AUI();
function <portlet:namespace />enableCheckout() {
Liferay.Util.toggleDisabled(A.byIdNS(namespace, 'submitButtonID'), false);
}
</script>

[Chris Tantalo，修改在9 年前。]

Also tried, but doesnt seem to function either
<aui:script use="aui-base">
Liferay.provide(
window,
'<portlet:namespace />enableCheckout',
function() {
var mybutton= A.one('#<portlet:namespace />submitButtonID');
Liferay.Util.toggleDisabled(mybutton, 'true');

});
</aui:script>

[Chris Tantalo，修改在9 年前。]

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>

[Chris Tantalo，修改在9 年前。]

ended up doing a different way, since button enable/disable didnt seem to work

<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>
</aui:form>