By Saron


2020-02-14 08:09:00 8 Comments

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'");
    }); 


});

1 comments

@Phong 2020-02-14 08:20:54

  1. You should listen to event like
    img.on("click", function(){
  1. 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>

@freedomn-m 2020-02-14 08:24:28

img.click is a synonym for img.on("click", - despite attempts at otherwise, they're still both valid and will be for the foreseeable future.

@Saron 2020-02-14 08:24:57

Thank you! but how do I remove the disabled attribute when either video or YouTube button is been clicked

@Phong 2020-02-14 08:27:14

You just set attr("disabled", false)

@Saron 2020-02-14 08:28:17

Which means I have to create another click function to solve that right? @Phong

@Phong 2020-02-14 08:29:31

Whenever one button is clicked, the rest of the buttons will be disabled. So you cannot click again. What does the behavior do you want?

@Phong 2020-02-14 08:32:44

I've just updated my answer with Reset_Button for you, Please take a look at.

Related Questions

Sponsored Content

31 Answered Questions

[SOLVED] How to check a radio button with jQuery?

27 Answered Questions

[SOLVED] Trigger a button click with JavaScript on the Enter key in a text box

36 Answered Questions

18 Answered Questions

[SOLVED] Disable/enable an input with jQuery?

20 Answered Questions

[SOLVED] Click button copy to clipboard using jQuery

  • 2014-03-22 17:53:46
  • Dishan TD
  • 699386 View
  • 412 Score
  • 20 Answer
  • Tags:   jquery html css

23 Answered Questions

[SOLVED] How to remove close button on the jQuery UI dialog?

36 Answered Questions

[SOLVED] Use jQuery to hide a DIV when the user clicks outside of it

  • 2009-09-10 06:11:27
  • Scott Yu - Front-End UX
  • 708545 View
  • 955 Score
  • 36 Answer
  • Tags:   jquery html hide styling

3 Answered Questions

[SOLVED] Cannot display HTML string

20 Answered Questions

[SOLVED] jQuery disable/enable submit button

11 Answered Questions

[SOLVED] Disable button in jQuery

  • 2013-02-27 21:13:33
  • user2047817
  • 639431 View
  • 351 Score
  • 11 Answer
  • Tags:   jquery

Sponsored Content