Liferay 합금 버튼 사용/사용 안함

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

Answer 1

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

  궁극적 submitButtonID 노드의 disabled 속성을 사용 set 방법은 원하는 기능을 달성하기 위해 필요한 주요 구성 요소이다. 내 fiddle은 내가 언급 한 세 가지 접근법을 포함합니다. aui taglib 요소를 사용하는 경우 다른 시도의 일부로 ID 번호 앞에 <portlet:namespace />을 추가해야합니다.

---

Answer 2

그래서 당신이 사용하려는/비활성화 submitButtonID 나타납니다 다른 방법 일까지 종료

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