I'm currently using a font awesome icon button and I'm looking to create a disabled state for the icon. Although I can achieve a disabled button appearance using the Bootstrap disabled class, the button remains clickable. Is there a way to make it non-clickable?
Below is my HTML code:--
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled>
<i class="fa fa-search"></i>
</button>Try implementing pointer-events: none;
button{
pointer-events: none;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled>
<i class="fa fa-search"></i>
</button>.focus(), trigger(), & .blur()Upon understanding the actual requirement of the original poster (OP) - which was to prevent the button.disabled element from taking away the focus from enabled buttons - the updated demonstration successfully achieves this goal. However, it does not apply the same logic to button[disabled] as those are completely inert. 💀
[disabled] Attribute Always Functions CorrectlyThe [disabled] attribute always functions as expected. On the other hand, the Bootstrap .disabled class does not. Refer to the tests in the demo below for clarification.
$('.btn').on('click', function(e) {
console.log('clicked')
});
$('.btn').not('.disabled').on('click', function() {
$('.btn').removeClass('lastFocus');
$(this).addClass('lastFocus');
});
$('.disabled').on('focus', function(e) {
$(this).blur();
$('.lastFocus').trigger('focus');
});b {
color: cyan
}
u {
color: black;
font-weight: 700
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<button class='btn btn-primary' disabled>
<i class="fa fa-search"></i><b>[disabled] attribute</b>
</button>
<button class='btn btn-primary disabled' disabled>
<i class="fa fa-search"></i><b>[disabled] attribute</b> and <u>.disabled class</u>
</button>
<button class='btn btn-primary disabled'>
<i class="fa fa-search"></i><u>.disabled class</u>
</button>
<button class='btn btn-primary disabled'>
<u>.disabled class</u>
</button>
<button class='btn btn-primary'>
<i class="fa fa-search"></i>enabled
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Utilize this
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled style="pointer-events:none">
<i class="fa fa-search" ></i>
</button>You might want to consider this approach as well.
.xyz
{
cursor: not-allowed;
pointer-events: none;
color: #c0c0c0;
background-color: #ffffff;
} <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary xyz'>
<i class="fa fa-search"></i>
</button>Successfully implemented utilizing pointer-events on icon.
Providing my solution below:
<button class='btn btn-primary disabled' disabled>
<i class="fa fa-search" style="pointer-events:none"></i>
</button>You can prevent the click event from firing by using onclick="return false;".
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' onclick="return false;" disabled >
<i class="fa fa-search"></i>
</button>The alignment of these buttons within their container is not what I desire. They are currently floating to the left, which is a result of the float: left; attribute applied to them. I tried removing the float: left; and instead used text-align: center; on ...
Is there a method to confirm if the grid has finished loading using a separate function? My goal is to automatically click on the first row and move that row to the second grid once this action occurs. jQuery("#search_grid").jqGrid('setGridParam&apo ...
How can I eliminate the gap between the first and second images in HTML when changing lines? <div> <img src='http://lorempixel.com/100/100/abstract/1' /> <img src='http://lorempixel.com/100/100/abstract/2' />< ...
Below is the code I am currently using: $selects = $('select'); $selects.val( $selects.prop('defaultSelected')); The purpose of this code is to reset the values of all select elements on my webpage. However, I am facing an issue in IE ...
Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...
I currently have a Spring-based web application that integrates with jQuery Tabs. What I'm doing is building a data string with specific parameters and appending it to a URL: var hrefData = "?" + item1 + "&" + item2 + "&" + item3; var href = ...
This is the first website I am working on: www.olgoya.com The issue I am facing is that all major browsers, except IE8, display the submenu even when the mouse hovers over the 'portfolio' item. Upon investigation, I found that the problem lies w ...
When working with HTML5, I discovered that you can create multiple input elements that share the same option list like this: <datalist id="list1"> <option value="A"> <option value="B"> </datalist> input1: <input list="l ...
I'm attempting to recreate a layout similar to the privacy policy page on Twitter. On this page, you'll notice that it is divided into sections with a left menu corresponding to each section. As you scroll down the page, the menu sticks to the ...
Here is the css and html code that I am working with: <style type="text/css"> .formLayout { background-color: #f3f3f3; border: solid 1px #a1a1a1; padding: 10px; width: 300px; border-radius: 1em; } ...
I'm facing an issue while trying to create a video playlist using two HTML files (index.html and video.html). In my video.html file, I have set up a popup for playing videos. However, whenever I close the popup or click anywhere on the page, it redire ...
I currently have a setup with 3 pages: 2 of them are WordPress pages while the other page is a custom page template featuring a form. The first two pages were created using the wp-job manager plugin. The first page includes a dropdown menu with a list of a ...
I'm having trouble figuring out why, but every time I attempt to use a specific code (for example: https://codepen.io/plavookac/pen/QMwObb), when applying it to my index.html file (the main one), it ends up displaying on top of my content and makes ev ...
Struggling with this issue has me on the verge of pulling my hair out. It seems like a simple task, yet I can't seem to achieve perfection. My goal is to create a row of squares that maintain their aspect ratio but scale down in size as their containe ...
Within my PHP code, I am utilizing the following: <?php @include_once('fields.php'); $gg = fetchinfo("val","inf","n","current"); $mm = fetchinfo("val","info","n","max"); $cc = fetchinfo("num","games","id",$gg); $percent = $cc / $mm * 100; ...
I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...
I am looking to upload an image and display it without having to reload the page. I believe this can be achieved using Ajax form submission. However, I have tried some code but the Ajax form submit function does not seem to be working for me. Can someone p ...
I am working on a page layout similar to this FIDDLE body { margin:0 auto; max-width: 800px; padding:0 0 0 0; text-align:left; background-color:#FFFFFF; background-image: url('http://freeseamlesstextures.com/images/40-dirty-pa ...
How can I truncate text on two lines with truncation at the beginning of the text? I want it to appear like this: ... to long for this div I haven't been able to find a solution. Does anyone have any suggestions? Thanks in advance! ...
I have a JavaScript file located at sample/scripts/sample.js and there are 8 HTML files in the directory sample/src/templates/. My goal is to select a button on one of the HTML files. When I tried using angular.elemnt(btn-id).html(), I received an 'un ...