Enable/Disable an AUI button with Alloy-UI

[Cameron McBride, geändert vor 12 Jahren.]

I have a very simple jsp page that has two buttons. Clicking one of the buttons should "enable" the other button, which starts out disabled. The alert message will print but the button is not enabled.

<liferay-portlet:actionurl portletConfiguration="true" var="formURL" />	
<aui:form action="<%= formURL %>" method="post" name="fm">	
		<aui:button type="button" id="disabled-button" value="Disabled" disabled="true" />
		<aui:button type="button" id="enabled-button" value="Click This" />
</aui:form>

<script type="text/javascript" charset="utf-8">
AUI().use('event', 'node', function (A) {
    var clickedNode = A.one('#enabled-button');
    
    if (clickedNode) {
    	clickedNode.on('click', function (eventFacade) {
    		var btn = A.one('#disabled-button');
			if (btn) {
				btn.set('disabled', false);
				alert('yes');
			}		
        });
    }
});
</script>

Next I have created almost the same thing using regular HTML form and YUI and it works perfectly. You can see this on jsfiddle: http://jsfiddle.net/zYBbf/

My final example I took the jsfiddle HTML + YUI code and made a simple jsp page out of it. With this page the button is not even disabled to begin with.

<input type="button" id="disabled-button" value="Disabled" disabled>
<input type="button" id="enabled-button" value="Click This">

<script type="text/javascript" charset="utf-8">
YUI().use('event', 'node', function (Y) {
    var clickedNode = Y.one('#enabled-button');
    
    if (clickedNode) {
        clickedNode.on('click', function (eventFacade) {

            var btn = Y.one('#disabled-button');
            if (btn) {
                btn.set('disabled', false);
            }            
        });
    }
});
</script>

[Cameron McBride, geändert vor 12 Jahren.]

It looks like when you set a button to disabled Liferay wraps a css wrapper around it. To enable a button you have to do both of these, which is stinky:

btn.set('disabled', false);
btn.ancestor('.aui-button').removeClass('aui-button-disabled');

[Navin Agarwal, geändert vor 10 Jahren.]

Hello Cameron,

I am also trying to get the same output using the Text box.

I have requirement is as follows : There will be One text Box and one Button
The end user will be seeing the text box and a button (which is disabled)

• 1 User should not have the possibility to click the button until unless he enter number in the text box.
• 2 The Number should be Greater then or equal to are 8
• 3 The number should be Less then or equal to 9

After Input of relevant Value He should be able to click the Botton(enabled button)
below is the code i have written :

             <aui:input label="Add Administrator" showrequiredlabel="false" type="text" name="findUser" onkeypress="javascript:valueKeyPress();">
                    <aui:validator name="required" />
		    <aui:validator name="minLength" errormessage="enter-minimum-8-digits">8</aui:validator>
		    <aui:validator name="maxLength" errormessage="enter-maximun-9-digits">9</aui:validator>
		    <aui:validator name="number" errorMessage="enter-only-digits" />
	    </aui:input>
            <aui:button name="Find" value="find" type="button" />

function valueKeyPress() {
	AUI().use('event', 'node', function (A) {
		var findUser = document.getElementById(portletNameSpace+"findUser").value;
		alert(findUser.length);
		if(findUser.length == 8 || findUser.length == 9){
			var btn = A.one('#find-button');
            if (btn) {
                btn.set('disabled', false);
                btn.ancestor('.aui-button').removeClass('aui-button-disabled');
                alert('yes');
            }        
	       
	    }
	});	
}

Please help me to fix the issue thanks in advance

[Navin Agarwal, geändert vor 10 Jahren.]

I missed this code

<aui:button name="Find" value="find" type="button" id="disabled-button" disabled="true" />

[Rajeeva Lochana .B.R, geändert vor 9 Jahren.]

Hi Navin/Cameron,

This we can achieve by setting the attribute value instead of set or removing class. Have a look on the below example.

function valueKeyPress() {
 AUI().use('aui-base', function (A) {
   var findUser = document.getElementById(portletNameSpace+"findUser").value;
         if(findUser.length == 8 || findUser.length == 9){
            var btn = A.one('#find-button');
            if (btn) {
             A.one("#disabled-button").attr({'disabled' : false});
            }        
        }
    });    
}

[Zeenesh Patel, geändert vor 7 Jahren.]

Hi Navin
thank you sir its really helpful to me. Its working fine for me.