+ Start a Discussion
AnjaanAnjaan 

How to enable disabled button

Hello All,

I have used a checkbox with some button. The button is disabled by default. when the checkbox is checked it should be enabled. otherwise not. i am facing some problems you may help me. Its really urgent.

I am attaching the code


<apex:page >
<script type="text/javascript">
   
    function enable(checkbox, btn){
        if(checkbox.checked){
            document.getElementById(btn).disabled = false;
         
        }else{
            document.getElementById(btn).disabled = true;
        }
    }

</script>
<apex:form id="myForm">

  <h1>Congratulation</h1>This is your new Page
    <apex:pageBlock >
            <apex:inputCheckbox id="chk" onclick="enable(this,'{!$Component.pageblock.btn}');">
        </apex:inputCheckbox>
        <apex:pageblockButtons id="pageblock" location="bottom">
            <apex:commandButton value="OK" id="btn" disabled = "true">
            </apex:commandButton>
        </apex:pageblockButtons>
       
       
    </apex:pageBlock>  
</apex:form>
</apex:page>
RickyGRickyG
You want to set the disabled attribute to a value in the controller, then do a rerender for the pushbutton when checkbox is checked.

Hope this helps.
AnjaanAnjaan
Your reply may be right but i dont know where i have to rerender it. In javascript?. And with which method?. Please reply me with the appropriate example. It will be highly appritiated.

Thanks and Regards
Osman Ashraf Bajwah
Software Engineer
RickyGRickyG
Osman -

Most Visualforce components have a rendered attribute, and you can rerender a section of a Visualforce page to force a partial page refresh.  Chapter 12 of the Developer Guide has an example which, in part, does just that.
Seb OrtizSeb Ortiz

Hi there,

 

Rerender is not necessary. Try this:

 

 

function disableBtn(buttonId, disable) {
 var btn = document.getElementById(buttonId);
 
 if(disable) {
 btn.disabled = "disabled";
 btn.className = "btnDisabled";
 } else {
 btn.disabled = "";
 btn.className = "btn";
 }
 }
Then call this func in an event handler (onclick, onchange, etc) and done
Regards
Sebastian

 

ArunaAruna

Hi Sebastian,

 

I have also same problem, but I need to enable when deselected   and disable when selected a check.

I  was using below function

 

function checkBoxDisable(checkbox){
alert('checkbox1');
var checkBoxId=document.getElementById(checkbox.id);
alert('checkbox1=='+checkBoxId);
if(checkBoxId.checked==true){
alert('checkbox if 1);
disabled = true;

alert('checkbox if 2');
}
else{
alert('checkbox else 1');
disabled=false;
alert('checkbox else 2');
}

  

and calling in <td><apex:inputCheckbox value="{!accountDetail.OptOutSettings.brandOptOut}" rendered="{!IF(accountDetail.marketingGroup =='test',false,true)}" id="bopt" onclick="checkBoxDisable(this)"/>