Disable button when another button is been clicked with jquery

Question

I have a form am working on for a project which allows users to upload images, videos and YouTube videos and I will like users not to upload photos, videos and YouTube videos at the same time but am finding it difficult on how to disable the image button when video or YouTube button is been clicked, disable video button when image or YouTube button is been clicked and disable YouTube button when image or video button is been clicked. Below is my form and Jquery code I have written so far

HTML

<form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"])?>" name="post-box" enctype="multipart/form-data" accept-charset="utf-8">
                    <div class="post_box_cont">
                        <textarea class="form-control" name="post_box" placeholder="Post something..." onkeyup="count_post_box_char(this, 500)"></textarea>

                        <div class="mt-1">
                            <button class="post_box_but">
                                <span class="icon icon-location"></span>
                            </button>

                            <button class="post_box_but" data-placement="bottom" data-toggle="tooltip" title="Mention people by typing @ before their username e.g. @aaron">
                                <span class="icon icon-at"></span>
                            </button>

                            <button class="post_box_but" id="image">
                                <span class="icon icon-image"></span>
                            </button>

                            <button class="post_box_but" id="video">
                                <span class="icon icon-video"></span>
                            </button>

                            <button class="post_box_but" id="youtube">
                                <span class="icon icon-youtube"></span>
                            </button>

                            <button class="post_box_upload_but">
                                <b>Post</b>
                            </button>
                        </div>
                    </div>
                </form>

JQUERY

$(document).ready(function(){
    // var
    var img = $("#image");
    var video = $("#video");
    var youtube = $("#youtube");

    img.click(function(){
        $("#video").attr("disabled='disabled'");
        $("#youtube").attr("disabled='disabled'");
    }); 

  video.click(function(){
        img.attr("disabled='disabled'");
        youtube.attr("disabled='disabled'");
    });

   youtube.click(function(){
        img.attr("disabled='disabled'");
        video.attr("disabled='disabled'");
    }); 


});

Answer 1

1. You should listen to event like

    img.on("click", function(){

2. You can disable button like

    attr("disabled", true);

// var
    var img = $("#image");
    var video = $("#video");
    var youtube = $("#youtube");

    img.on("click", function(){
        video.attr("disabled", true);
        youtube.attr("disabled", true);
    }); 

  video.on("click", function(){
        img.attr("disabled", true);
        youtube.attr("disabled", true);
    });

   youtube.on("click", function(){
        img.attr("disabled", true);
        video.attr("disabled", true);
    });
    
    $("#btnReset").on("click", function(){
        img.attr("disabled", false);
        video.attr("disabled", false);
        youtube.attr("disabled", false);
    });

.post_box_but:disabled{
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

                    <div class="post_box_cont">
                        <textarea class="form-control" name="post_box" placeholder="Post something..." onkeyup="count_post_box_char(this, 500)"></textarea>

                        <div class="mt-1">
                            <button class="post_box_but">
                                <span class="icon icon-location"></span>
                            </button>

                            <button class="post_box_but" data-placement="bottom" data-toggle="tooltip" title="Mention people by typing @ before their username e.g. @aaron">
                                <span class="icon icon-at"></span>
                            </button>

                            <button class="post_box_but" id="image">
                                <span class="icon icon-image"></span>
                            </button>

                            <button class="post_box_but" id="video">
                                <span class="icon icon-video"></span>
                            </button>

                            <button class="post_box_but" id="youtube">
                                <span class="icon icon-youtube"></span>
                            </button>
                            <button class="post_box_upload_but" id="btnReset">
                                <b>Reset_Button</b>
                            </button>
                            <button class="post_box_upload_but">
                                <b>Post</b>
                            </button>
                        </div>
                    </div>