0

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

2 回答 2

1

所以看起来你想启用/禁用submitButtonID基于termsOfServiceRadio.

您有几种基本相同方法的变体可用。基本概念是将单击侦听器分配给每个单选按钮,仅基于“已选中”的“接受”选项设置按钮的状态。您可以使用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)
  })

})

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


于 2014-07-17T20:06:24.147 回答
0

最终以不同的方式做这件事

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

于 2014-07-17T19:38:53.237 回答