Button that depends on a checkbox

Question

I'm trying to make a checkbox (for disclaimer) - until this checkbox is checked - a submit button should be disabled.

It does not seem to be much difficult and yet - I missed something here.

my code :

Checkbox:

 <apex:inputCheckbox id="disclaimerCheckBox" style="margin-left: 20px;" onchange="disableSubmitButton(this);">
 </apex:inputCheckbox>

Button:

<div class="form-group text-center">
    <apex:commandButton disabled="true" id="submitBtn" action="{!save}"  styleClass="btn btn-primary" rerender="hiddenForm" oncomplete="submitForm('{!sid}');" value="Submit"  status="statusSaveTrip"/>
</div>

JS FUNCTION:

function disableSubmitButton(checkbox){
    if(checkbox.checked){
        document.querySelector("[id$='submitBtn']").disabled = false;

    }else{
        document.querySelector("[id$='submitBtn']").disabled = true;

    }
 
}

Everything is working as expected, except that the save action inside the command button is not working even though it clickable.

I believe the problem is on the disable=true on the command button - But how can I make the button to be disabled from the begging?

I tried to do the "document.ready" in JS :

(function() {

    document.querySelector("[id$='submitBtn']").disabled = true;
 
 })();

But it gives me an error that its null.

I know I can do it with the Controller variable - but I want to stay on the client side.

I would much appreciate your help.

EDIT :

because I added the attribute: "disable" to the command button component - I thought that with the javascript("disableSubmitButton" function ), I can change the value of it to True or to false.

but I think I got wrong here.

the button was clickable and not clickable base on the disable value that I passed in the Js function ("disableSubmitButton") but because I added the "disable:true" inside the command button component - the button was clickable because of the Js function when I changed the disalbe to false but the save action (Its a controller without standard controller or any other extantions - Its a logic that I wrote) wasnt called.

I just got a permission to install JQuery to the project (I was not used it because of matters of bureaucracy) But now I just used the $j(document).ready(functio() so it solve my issue.

Thanks a lot! Thanks!

Answer 1

I used jQuery ready function to disable the button on the onload of the page :

$j(document).ready(function(){
      document.querySelector("[id$='submitBtn']").disabled = true;
  });

and then, every click on the checkbox - I disable or enable the button to be clicked :

 function disableSubmitButton(checkbox){
      if(checkbox.checked){
           document.querySelector("[id$='submitBtn']").disabled = false;

      }else{
          document.querySelector("[id$='submitBtn']").disabled = true;

      }


  }

When I used the "disabled" variable on the button component - I couldn't then change it on the JS function with document.querySelector("[id$='submitBtn']").disabled = false;

somehow It not worked for me.

I believe there is a better solution but this one helped me.

Thanks.

Answer 2

I was able to solve this problem without the need of JQuery, and I was also with the need of a disabled button. I just called a window.onload function calling the button id as disabled and everything worked fine.

It is something like:

window.onload = function() {
    document.querySelector("[id$='submitBtn']").disabled = true;
};