disable two buttons after clicking reject/close-CodePudding

My task is to be able to disable the approve and return buttons after clicking the reject button. Reject button means closing a project. These are my codes. Can anybody help me figure out how to disable the buttons?this is what the button looks like.

<div >
    <button  id="approve">Approve</button>   
    <button  id="clear" onclick="sweetalertrejects()">Reject</button>
    <button  id="return">Return</button>       
    </div>
    </div>
    </div>
                        <script>
                        function sweetalertrejects(){
                            swal("This button means closing the task. You will not be able to revert this action. Do you wish to continue?", {
                                icon: "info",
                                  buttons: {
                                    cancel: "Cancel",
                                    catch: {
                                      text: "Yes, close this task",
                                      value: "cancel",
                                    },
                                    
                                  },
                                })
                                .then((value) => {
                                  switch (value) {
                                 
                                
                                    case "cancel":
                                      swal("Closed!", "Task has been closed.", "success");
                                      break;
                                 
                                    default:
                                      swal("Task has not been closed.");
                                  }
                                });

                        }
                        </script>

CodePudding user response：

You can get the buttons by id and disable them as follows:

document.getElementById("approve").disabled = true;
document.getElementById("return").disabled = true;

Here is whole code

function sweetalertrejects(){
swal("This button means closing the task. You will not be able to revert this action. Do you wish to continue?", {
  icon: "info",
  buttons: {
    cancel: "Cancel",
    catch: {
      text: "Yes, close this task",
      value: "cancel",
    },

  },
})
  .then((value) => {
  switch (value) {


    case "cancel":
      swal("Closed!", "Task has been closed.", "success").then(()=>{
      document.getElementById("approve").disabled = true;
      document.getElementById("return").disabled = true;

      });
      break;

    default:
      swal("Task has not been closed.");
  }
});
}

CodePudding user response：

You need to include classname "disable" to the Approve & Return button and your javascript code should look like this:

<script>
$('#clear').click(function() {

    swal("This button means closing the task. You will not be able to revert this action. Do you wish to continue?", {   
    icon: "info",
        buttons: {
        cancel: "Cancel",
        catch: {
            text: "Yes, close this task",
            value: "cancel",
        },
        
        },
    })
    .then((value) => {
        if(value){
            $('.disable').attr('disabled','disabled');
            swal("Closed!", "Task has been closed.", "success");
        }else{
            swal("Task has not been closed.");
        }
    });

});
</script>