Develop Reference

How to focus on a range slider using Javascript?

I would like to be able to focus on an input element of the type 'range', in other words, the default slider, so that the slider could be dragged without the user actually clicking on it.
The obvious solution would be to just use sliderelement.focus().
This however doesn't work.
I found here that the reason for this, is that I have to call this method on the handle of the slider. The class of the slider handle should be 'ui-slider-handle'.But for some reason document.querySelector('.ui-slider-handle') returns null.
The weird part is that this does work with JQuery when I use $('.ui-slider-handle').
I made this fiddle to clarify my problem. I would like to solve this using only Javascript.
--- edit ---
Perhaps I wasn't clear enough in my explanation. The class ui-slider-handle is not a custom class I added to the slider handle, since I cannot access the handle. I expected this to be the default class based on the answer I found (which I stated earlier).

In your fiddle, the querySelector is correct.
Your jQuery will always return true like that though.
For example change var handle2 = document.querySelector('.ui-slider-handle'); to a made up class like var handle2 = document.querySelector('.ui-slider-handlesdfsdfsdfsdf'); and it returns true.
If you want to check if an element exists you can use .length.
So just add .length to your selector and they will both return false.
var handle1 = $('.ui-slider-handle').length;
var handle2 = document.querySelector('.ui-slider-handle');
$('#1').html('JQuery, handle found: ' + (handle1 ? 'true' : 'false'))
$('#2').html('Javascript, handle found: ' + (handle2 ? 'true' : 'false'))
To put focus on the range element simply use .focus().
Here is an example. Use the buttons and your arrow keys to see that it is gaining/losing focus on the element.
function getFocus() {
document.getElementById("myRange").focus();
}
function loseFocus() {
document.getElementById("myRange").blur();
}
<input type="range" id="myRange" value="50">
<p>Click the buttons below to give focus and/or remove focus from the slider control.</p>
<button type="button" onclick="getFocus()">Get focus</button>
<button type="button" onclick="loseFocus()">Lose focus</button>

Why i always fail to make check mark to checkbox via javascript?

Look to my code below :
HTML :
<input type="checkbox" name="xyz[1][]" id="sel_44" style="margin:2px;" value="12345" onclick="myClick(this)">
Javascript :
<script>
$('#sel_44').attr("checked", true);
</script>
I already try every method (method that suggest by acceptance answer) in this URL : Check/Uncheck checkbox with javascript?
My Problem and Question :
I can sure $('#sel_loc_cb_44') is not null
and not undefined. But i can make checkmark via javascript or jquery.
How to fix my code and what's the source of problem?
Please kindly add jsfiddle to your solution post. thank you

try using
$('#sel_44').prop("checked", true);
you must change the propery of the DOM object instead of attribute

try this with jquery:
$("#sel_44").prop('checked',true);

Since jquery 1.6+ prop method provides a way to explicitly retrieve property values, while attr retrieves attributes. Here checked is a property. So use prop for checking a checkbox.
$('#sel_44').prop("checked", true);

Try this
$(document).ready(function() {
$('#sel_44').attr("checked", true);
});
I have tried in the jsfiddler, looks like you need to put your code inside the document ready function.
https://jsfiddle.net/o2gxgz9r/5935/

$(function(){
$('#sel_44').prop('checked',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="xyz[1][]" id="sel_44" style="margin:2px;" value="12345">

Change attribute

I've got a selection/dropdown with ID #pa_buy-sell[]. What I want to do is if the value is "buy" I want to change the attribute data-required="yes" to data-required="no" from a input field with class wpuf__regular_price_657. I also want to hide the span with class required. The code has to work in WordPress.
I'm quite new in this, so I'm not sure what's the right code. But I thought something like this could be a good starting point:
$('#pa_buy-sell[]').change(function(){
if($(this).val() == 'buy'){
//something need to happen here
}
});
Can someone help me with this?

Your code is correct until now. You have to replace the comment with the following lines:
$('.wpuf__regular_price_657').data('required','no');
$('span.required').hide();

To change the attribute to yes or no. you can use this:
$(".wpuf__regular_price_657").attr("data-required","no");
or you can use disabled as true or false, if you dont want to take input as
$(".wpuf__regular_price_657").attr("disabled", true);
and for hiding the particular span:
$("span.required").hide();
This will work fine in wordpress too
Hope it helped you

Please check with "===" which confirms Strong type checking (type and value) comparison and also refer the code for hiding the div with class required.
<script>
var $ = jQuery.noConflict();
$('.pa_buy-sell.wpuf_pa_buy-sell_657').change(function(){
if($(this).val() === "buy"){
$(".wpuf__regular_price_657").attr("data-required","no");
$("span.required").hide();
}
});
</script>

Javascript to select checkbox

What would be the javascript below to select the checkbox for value 0?
<input name="bootproto" id="bootproto" type="radio" value="0" key="bootproto">
I tried using
$('input[name="bootproto"]').click() but it didnt seem to work.

$("#bootproto").prop("checked",true);
Since you're using jquery, just set the property "checked" to true (I don't see why you're name selecting when you have a perfectly good ID there as well)
If you want to check it ONLY if value=0, add an if statement before this.

document.getElementById('bootproto').checked = true;
OR
$('#bootproto').prop('checked',true);

I figured out that $('input[value="0"]').click() seemed to work for me.

Try this,
$('input[name="bootproto"]').attr('checked',true);
Checked is actually an attribute of the input tag of type radio, So that you can use the .attr() function to set its checked attribute as true.
DEMO

You don't mention that you're using jQuery even tho you've apparently tried the syntax. On the off-chance you're not using it, try:
var i = document.querySelector('input[value="0"]').checked = true;

I would do the following : $('input[name="bootproto"]:not(:checked)').

Add disabled attribute to input element using Javascript

I have an input box and I want it to be disabled and at the same time hide it to avoid problems when porting my form.
So far I have the following code to hide my input:
$(".shownextrow").click(function() {
$(this).closest("tr").next().show().find('.longboxsmall').hide();
});
This is the input that gets hidden as a result:
<input class="longboxsmall" type="text" />
How can I also add the disabled attribute to the input?

$("input").attr("disabled", true); as of... I don't know any more.
It's December 2013 and I really have no idea what to tell you.
First it was always .attr(), then it was always .prop(), so I came back here updated the answer and made it more accurate.
Then a year later jQuery changed their minds again and I don't even want to keep track of this.
Long story short, as of right now, this is the best answer: "you can use both... but it depends."
You should read this answer instead: https://stackoverflow.com/a/5876747/257493
And their release notes for that change are included here:
Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr("value", "somevalue") will continue to work, as it did before 1.6).
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
Or in other words:
".prop = non-document stuff"
".attr" = document stuff
...
...
May we all learn a lesson here about API stability...

Working code from my sources:
HTML WORLD
<select name="select_from" disabled>...</select>
JS WORLD
var from = jQuery('select[name=select_from]');
//add disabled
from.attr('disabled', 'disabled');
//remove it
from.removeAttr("disabled");

If you're using jQuery then there are a few different ways to set the disabled attribute.
var $element = $(...);
$element.prop('disabled', true);
$element.attr('disabled', true);
// The following do not require jQuery
$element.get(0).disabled = true;
$element.get(0).setAttribute('disabled', true);
$element[0].disabled = true;
$element[0].setAttribute('disabled', true);

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true);
element.disabled = true;
element.setAttribute('disabled', true);
All of the above are perfectly valid solutions. Choose the one that fits your needs best.

You can get the DOM element, and set the disabled property directly.
$(".shownextrow").click(function() {
$(this).closest("tr").next().show()
.find('.longboxsmall').hide()[0].disabled = 'disabled';
});
or if there's more than one, you can use each() to set all of them:
$(".shownextrow").click(function() {
$(this).closest("tr").next().show()
.find('.longboxsmall').each(function() {
this.style.display = 'none';
this.disabled = 'disabled';
});
});

Since the question was asking how to do this with JS I'm providing a vanilla JS implementation.
var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
element.disabled = "disabled";
}

Just use jQuery's attr() method
$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');

in JQuery you can use the following functions:
$("input").prop('disabled', true);
$("input").prop('disabled', false);
For native js you can use:
document.getElementById("myElement").disabled = true;