Enable/Disable an AUI button with Alloy-UI

[Cameron McBride，修改在12 年前。]

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，修改在12 年前。]

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，修改在10 年前。]

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，修改在10 年前。]

I missed this code

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

[Rajeeva Lochana .B.R，修改在9 年前。]

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，修改在7 年前。]

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