Liferay 合金按钮启用/禁用答案

【问题标题】：Liferay alloy button enable/disableLiferay 合金按钮启用/禁用
【发布时间】：2014-07-17 18:18:44
【问题描述】：

我试图在选中复选框时启用/禁用一个简单的按钮，但在 Liferay 的 Alloy UI 中，它似乎不起作用。有什么建议吗？

<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>

继续我的试验但没有成功：

<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>

【问题讨论】：

标签： liferay-6 alloy-ui liferay-aui

【解决方案1】：

看来您想根据termsOfServiceRadio 启用/禁用submitButtonID。

您有几个基本相同的方法可用的变体。基本概念是将单击侦听器分配给每个单选按钮，仅基于“已选中”的“接受”选项设置按钮的状态。您可以使用 id 属性单独应用侦听器，也可以使用某些 css 类来同时获取两个输入元素并通过 each 方法应用侦听器。第三种选择是使用delegate 函数，这需要您将单选选项包装在“容器”中。

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)
  })

})

最终，在submitButtonID 节点上使用disabled 属性的set 方法是实现所需功能所需的关键组件。我的fiddle 包含我提到的三种方法。考虑到您正在使用 aui taglib 元素，您需要在 ID 前加上 <portlet:namespace /> 前缀，就像您在其他一些尝试中所做的那样。

【讨论】：

【解决方案2】：

最终以不同的方式这样做

<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>

【讨论】：