我正在为一个项目正在处理一个表格,该表格允许用户上传图像,视频和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'");
});
});
答案 0 :(得分: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>