Creating a modal with 2 buttons that execute functions, but I want to gray out the buttons that are bound with a function that returns false

I'm creating a game as a way to practice JS, and over the course of the game a modal will pop up offering two options. Depending on the state of the game, one option might be unavailable.

I built a "set up modal" function that takes in the name of the modal, the two choices, and the two functions that become bound to the buttons. The functions are defined elsewhere and are then passed into the buttons. If both functions are valid (don't return false) I can click either button in the modal and the functions executes. This currently works fine.

However, the functions return false if they can't be executed. Without explaining the details of the game, think of it like you can't have more than $5, so the function gainMoney(x) will return false if you already have $5.

I want modalDef() to be able to check to see if function1 and function2 are false, and if they are, it grays out the button and doesn't set the event listener. If not false, the button becomes a valid with an event bound to it. The entire setup works except for when I have a function that returns false.

I've been testing with a function that always returns false, and here's what happens:

In the below version, I use a simple not boolean to check the function. After I click the button for the function, the action executes (returning a false value), and THEN the button turns gray (opacity 0.3), and the modal doesn't disappear.

function modalDef(action, option1, option2, function1, function2){

//set the text of the modal

  $("#modal-action").text(action);
  $("#modal-choice1").text(option1);
  $("#modal-choice2").text(option2);

  //set the functions of each button using the function inputs

  $("#modal-choice1").one("click",function(){

//this is the line I need help with
    if(!function1()){
      $("#modal-choice1").css("opacity","0.3");
    }
    else{
      function1();
      modalToggle("hide");
    }

  });

  $("#modal-choice2").one("click",function(){
    if(!function2()){
      $("#modal-choice2").css("opacity","0.3");
    }
    else{
      function2();
      modalToggle("hide");
    }

  });

}

In the below version, i use .toString == false to check if the function is false (saw that somewhere on the interwebs). When I click the button, the function executes (returning a false value) and the modal disappears, basically as if the entire function was valid.

function modalDef(action, option1, option2, function1, function2){

//set the text of the modal

  $("#modal-action").text(action);
  $("#modal-choice1").text(option1);
  $("#modal-choice2").text(option2);

  //set the functions of each button using the function inputs

  $("#modal-choice1").one("click",function(){

//this is the line I need help with
    if(function1.toString == false){
      $("#modal-choice1").css("opacity","0.3");
    }
    else{
      function1();
      modalToggle("hide");
    }

  });

  $("#modal-choice2").one("click",function(){
    if(function2() == false){
      $("#modal-choice2").css("opacity","0.3");
    }
    else{
      function2();
      modalToggle("hide");
    }

  });

}

What is the correct way to do an if/else where the if checks to see if a function returns false?

EDIT: I'll add how I apply this, and again, this works except for the checking for false to lower the opacity:

function x(){previousBuiltFunction(input)}
function y(){previousBuiltFunction(input)}

modalDef("Choices","Choice 1", "Choice 2", x, y}