javascript - 当使用 jquery 单击另一个按钮时禁用按钮

Question

我正在为一个项目制作一个表单，该表单允许用户上传图像、视频和 YouTube 视频，我希望用户不要同时上传照片、视频和 YouTube 视频，但我发现很难知道如何上传照片、视频和 YouTube 视频。单击视频或 YouTube 按钮时禁用图像按钮，单击图像或 YouTube 按钮时禁用视频按钮，单击图像或视频按钮时禁用 YouTube 按钮。下面是我到目前为止编写的表单和 Jquery 代码

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. 您应该监听类似的事件

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

您可以禁用按钮，例如

    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>