We Keep Coding

How to click a button that doesn't have an ID using jQuery/JS

I would like to run some code in the Chrome console so that a button would be clicked. I done a bit of research on how to do this, but all the results I found achieved this by using the button's id. However, I can't find the ID of this button and I don't think it has one.
Here is the source code (the button is highlighted)
Please click here
All help is appreciated.
Thanks.

You can click the button using class btn-play
1. javascript example
var elem = document.getElementsByClassName("btn-play")[0];
elem.addEventListener("click",function(){
alert("clicked");
},false);
2. Jquery example
$(".btn-play").click(function(){
alert("clicked");
});
if you want to trigger click on the button then use below
$(".btn-play").trigger("click");

Your parent div with the id 'maincard' can be used with jquery to select that button. look at the example below. Using nth-child you can select which button you want to use. Currently it is selecting the last button from the image.
$("#maincard button:nth-child(2)").on("click", function() {
//Do Stuff here
});
Hope that helps!

you can try to find your button:
$("#maincard").find(".uk-button.uk-button-default.btn-play.uk-button-large.uk-width-small");

You can click a button using class name.
Example:
<input type="button" class="btnClass" value="Click Me" />
$('.btnClass').click(function(){
alert('Clicked');
});

Is there a way to disable a button using jQuery without making it transparent?

I am using jQuery in a project so I figured I leverage some of its specific methods. Anyway I have two buttons and upon a certain condition I'd like to disable it. Like so:
if (...condition...) {
$('button#submit, #hint').prop("disabled", true);
}
However it makes the buttons transparent—
Before:
After:
Rather than going through the trouble of creating a specific class does anyone know if jQuery have an alternative—which maybe makes it grey and
rather than transparent?
Thanks in advance!

You can try styling the disabled CSS selector.
$('button').on('click',function(e){
$(this).prop('disabled', true);
});
:disabled{
background:red;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Button
</button>

You can use jQuery to style the button per your liking.
$('button').on('click',function(e){
$(this).prop('disabled', true);
$(this).css('background-color','#CCCCCC');
});

Well, yes. Don't disable the button at all, style the button yourself and "kill" the button's ability to perform any actions.
var btn = document.querySelector("button");
btn.addEventListener("click", btnClick);
function btnClick(){
console.log("Business as usual.");
}
var chk = document.querySelector("input[type='checkbox']");
chk.addEventListener("change", function(){
if(this.checked){
// Kill the click event and alter the style
btn.classList.add("disabled");
} else {
// Restore the look
btn.classList.remove("disabled");
}
});
.disabled {
pointer-events:none;
color:#808080;
}
<button>Click Me</button>
<input type="checkbox" value="disable">Disable button

this in onclick with JQuery

I have 25 buttons like this:
<button class="Bouton_Clavier" onclick="Click_Bouton('Bouton-Name')">
Bouton-Name</button>
I want to change button style when i click on (only fort the clicked button).
So, the function is :
function Click_Bouton(Nom)
{
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
}
But it doesn't work.
If I change the function with :
function Click_Bouton(Nom)
{
$('button').click(function(){ $('button').removeClass('Bouton_Clavier')
.addClass('Bouton_Clavier_Select');
});
}
All buttons style are changed and its work after 2 clicks.
But I need to change only the style of clicked button.

Either manually set a context as Paul Draper did in his answer or (better) don't use inline event handlers:
$(".Bouton_Clavier").click(function () {
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});

It's because this is not set to what you think it should be.
<button class="Bouton_Clavier" onclick="Click_Bouton.call(this, 'Bouton-Name')"> Bouton-Name </button>
Also, I feel obligated to recommend not using onclick=, and instead using $.click.
Oh, and you don't seem to be doing anything with your argument Dom.

Change the button css after click event fired like this,
$(".Bouton_Clavier").click(function(){
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});
And in the last part of your code you mention $('button') that points to all buttons within your document. And that's why all button styles are changed on button click.
Demo

Disable click if class ="X", jQuery

Im trying to build a tabbed content box, and im wondering if its possible that i can disable 1 link with a specific class, such as 'disabled'
I read somewhere about a function called preventDefault, would this work?
http://jsfiddle.net/Ssr5W/

You can disable click event by returning false. like,
$('#tabmenu a').click(function() {
return !$(this).hasClass('disabled');
});
Also, I've updated your fiddle: http://jsfiddle.net/Ssr5W/1/
EDITED
and of course, preventDefault would work :)
$('#tabmenu a').click(function(e) {
if($(this).hasClass('disabled'))
e.preventDefault();
});
fiddle: http://jsfiddle.net/Ssr5W/2/

$('.disabled').click(function(e) {
e.preventDefault() ;
}) ;

You can just check for the class on the element that was clicked on:
$('tabElement').click(function(){
if(this.hasClass('disabled'))
return;
//Your code here..
);
This won't interfere with other clikc-handlers you may have on your tab element

Preventing select menu from opening

Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:
$('select').click (function (e) {
console.log (e);
return false;
});
and
$('select').click (function (e) {
e.preventDefault ();
console.log (e);
});
But neither worked.
What am I doing wrong?
EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.
The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.

This should work:-
$('#select').on('mousedown', function(e) {
e.preventDefault();
this.blur();
window.focus();
});

The problem is that you're using the wrong event.
<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
<option>Some Option</option>
</select>
JsFiddle

From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.

I believe the best solution would be to replace the select element with something else to click on (a button or a link).
BTW, you may want to look into the CSS 3 property appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:
http://css-infos.net/property/-webkit-appearance
https://developer.mozilla.org/en/CSS/-moz-appearance

You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:
function cancelDropDown(ev) {
ev.preventDefault();
}
document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);

Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.
$(document).ready(function() {
$('#idOfSelect option').css('display', 'none');
});
Updated Solution:
$(document).ready(function() {
$('#idOfSelect').focusin(function() {
$(this).css('display', 'none');
$('body').click(function(event) {
$(this).unbind(event);
$('#idOfSelect').css('display', 'block');
});
});
});

I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.
<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>
<!-- The JS function -->
<script>
function tackleDropdown(){
document.getElementById('select').setAttribute('size', 0);
// your code for displaying the jQuery UI dialog (is it colorbox???)
// re-enabling the drop down
document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
}
</script>

Use disabled
$(this).attr("disabled","disabled");

Some good answers here. But still I had to make some additions.
$(document).on('keydown mousedown touchstart', 'select.disabled', function (e) {
e.preventDefault();
})

A simple solution based on CSS is this small fragment:
select:read-only * {
display: none;
}
This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.