Question

我正在尝试在选中复选框时启用/禁用一个简单的按钮，但在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>

Answer 1

因此，您似乎希望根据submitButtonID启用/停用termsOfServiceRadio。

您可以使用几种基本相同的方法。基本概念是将点击侦听器分配给每个单选按钮，仅根据＆＃34;接受＆＃34;设置按钮的状态。选项正在＆＃34;已检查＆＃34;。您可以使用id属性单独应用侦听器，也可以使用某些css类，它们允许您同时获取两个输入元素，并通过each方法应用侦听器。第三种选择是使用delegate函数，这需要将无线电选项包装在＆＃34;容器中＃34;。

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

})

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

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

Liferay合金按钮启用/禁用

2 个答案: