Develop Reference

jQuery prop() method works, but it doesn't add the "disabled" attribute to the element

I'm trying to disable a button for prevent adding new rows in table.
My problem is that prop() method work fine, but doesn't disable button (I can't add new rows, its worked fine, but button still click and looks like "active" (and attribute "disabled" not added to my button)).
If I use attr("disabled", "disabled") instead of prop("disabled", true) that works fine and button disabling (attribute "disabled" added to element), but I read what to use attr() is bad after JQuery 1.6+.
var addBtn = $(".k-grid-add");
addBtn.bind("click", function () {
if (grid.dataSource.data().length == 9) {
$(addBtn).prop("disabled", true); // <- work, but button still "active"
// $(addBtn).attr("disabled", "disabled"); // <- work fine
}
What am I doing wrong? Thanks!

Since disabled is a Boolean attribute, you need to set it like disabled="disabled":
$(addBtn).prop("disabled", "disabled");

It is working for me ! Just look what I tested ....
addBtn = $("#btn");
addBtn.prop("disabled", true);
addBtn.on("click",function() { console.log(999); });
//
enable.onclick = function() {
addBtn.prop("disabled", false);
}
//
disable.onclick = function() {
addBtn.prop("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">sdf</button>
<button id="enable">Enable</button>
<button id="disable">Disable</button>

I can't verify that, it should work. Here's a part my code, which is working, if I enter more than 6 characters, the buttons are active, if I delete it the buttons get disabled. What version of jQuery do you use? Also, the use of bind is deprecated in jQuery version >3.0, using element.on() will be more future proof (http://api.jquery.com/bind/).
$commentsInput.on('input.UECommenting', function (event) {
let buttonsDisabled = $commentsInput.val().length < 7 ? true : false;
for (let button in $commentingButtons) {
$commentingButtons[button].prop({ 'disabled': buttonsDisabled, 'title': buttonsDisabled ? 'No comments without content!' : '' });
}
});
And I have to recommend getting used to use namespaces for events, with that you can easily use element.off('.namespace') to ensure that your events wont be setted and fired multiple times.

disable enable button using jquery

I have a working javascript version to disable/enable a from button but I can not get it working using jQuery.
My jsfiddle has both versions. The javascript version is commented out.
//NOT WORKING jQuery
function controls(id) {
if (id === "button_start") {
//$('button_start').prop('disabled','disabled');
// $('button_stop').removeProp('disabled','disabled');
// testing
$('#button_start').on('click',function() {
$(this).prop('disabled', 'disabled');
});
$('#button_stop').on('click', function(){
$(this).removeProp('disabled', 'disabled');
});
//console.log(id);
} else {
//$('button_stop').prop('disabled','disabled');
//$('button_start').removeProp('disabled','disabled');
// testing
$('#button_stop').click(function() {
$(this).prop('disabled', 'disabled');
});
$('#button_start').click(function(){
$(this).removeProp('disabled', 'disabled');
});
//console.log(id);
}
}
jsFiddle: https://jsfiddle.net/tommy6s/w2u8eskv/
Thank you for your help!

This might not solve your problem, however you are using the removeProp method wrong. According to the jQuery documentation, removeProp takes only one attribute
.removeProp( propertyName )
propertyName
Type: String
The name of the property to remove.
In your example, I would change your lines that look like this
$('#button_start').click(function(){
$(this).removeProp('disabled', 'disabled');
});
to this
$('#button_start').click(function(){
$(this).removeProp('disabled');
});
https://api.jquery.com/removeProp/
Also, remember that id elements must start with the # sign. You had that in your OP but not in the fiddle.

Your selectors are wrong.
$('button_start')
should be
$('#button_start')
^--------------- Missing id selector syntax
Then you need to include the jQuery library for the fiddle to start working.

Add the style:
#button_start:disabled{background:blue;opacity:0.3;}
and your script:
function controls(id) {
if (id === "button_start") {
$('#button_start').attr('disabled','disabled');
$('#button_stop').removeProp('disabled');
} else {
$('#button_stop').attr('disabled','disabled');
$('#button_start').removeProp('disabled');
}
}

For jQuery versions after 1.6:
$('#button_start').prop('disabled', false); //to enable and pass true to disable
For other options and versions, look at this SO answer Disabling and enabling an HTML input button

jQuery change value of input and display it as text

I'm struggling with the following problem. I have input text element. I want a user to enter something there and then his value appears as a normal text (the input should disappear).
I searched for a few solutions but nothing worked for me. What I tried (whatever function I provide, I get no results, what should I provide to get the effect I described above and how to make it happen?):
$('input.modified').on('input', function(){
(this).append('<p>some</p>');
});
OR
$("input.modified").bind("propertychange change keyup paste input", function(){
$(this).append("<p>dgdgd</p>");
});
OR
$("input.modified").change(function(){
$(this).css("visibility","hidden");
}); //end change function
How to make functions like .on() or .change() work with my code?
thanks for all the answer, but I can't move your examples to my code :(
Please verify this fiddle what I'm missing:
[http://jsfiddle.net/w6242/][1]

Check this DEMO
HTML:
<input class="modified" type="text"/>
<p></p>
JS:
$("input.modified").change(function(){
$('p').html($(this).val());
$(this).css("visibility","hidden");
});

check this
Fiddle
$("#in").focusout(function(e){
$("span").html(($("#in").val()));
$(this).hide();
});

Here a fiddle http://jsfiddle.net/keypaul/NsWC5/5/
HTML
<div id="wrapper">
<input type="text" id="writer" />
send
</div>
JQuery
$("#submit").click(function(e){
var txt = $("#writer").val();
$("#writer").fadeOut(400);
$("#submit").fadeOut(400, function(){
$("#wrapper").append('<div id="text">' + txt + '</div>').hide().fadeIn(600);
});
e.preventDefault();
});
If you need to do that with onther event (instead of a click submit) you can use onchange or focusout applied to your input element

At its simplest, assuming you really want to replace the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var p = $('<p />', {
text : this.value
});
$(this).replaceWith(p);
}
});
JS Fiddle demo.
Or, to insert an adjacent element and simply hide the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var span = $('<span />', {
text : this.value
});
$(this).hide().after(span);
}
});
JS Fiddle demo.
The above jQuery works with the following demonstrative HTML:
<input id="demo" type="text" />
References:
after().
hide().
on().
replaceWith().

how to apply function to each checkbox on page?

I am trying to apply a function to every checkbox on a page that shows/hides <div class="selectlist"> depending on if the checkbox is checked, this function makes all the <div class="selectlist"> on the page toggle
$("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
I tried the jquery each function like this but that doesnt seem to work
$.each($("input[type=checkbox]").live('change', function() {
if ($(this).is(':checked') == false) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
}));
I know its possible to this by using a class instead of input[type=checkbox] but I want to avoid doing that
How can I make jquery change the behavior of the checkbox the user clicks?

If you're trying to bind an event handler to all elements verifying input[type=checkbox], simply do
$(document).on('change', "input[type=checkbox]", function() {
if (!this.checked) {
$('#selectlist').hide();
} else {
$('#selectlist').show();
}
});
No need to use each there : most jQuery functions work if the jQuery set contains more than one element.
Note that I use on there instead of live : after having been deprecated for a long time, live has been removed from recent versions of jQuery.
EDIT : discussion in comments below lead to this code :
$(document).on('change', "input[type=checkbox]", function() {
$(this).next().toggle(this.checked);
});

$(document).on('change', 'input[type=checkbox]', function() {
$('#selectlist').toggle(this.checked);
});
ID's are uniqe, and there is no "all the <div id="selectlist"> on the page toggle", there can be only one? Use a class instead, and show us what the markup looks like !

Replacing link text on Hide/Show

I'm sure this question will take one of you 3 seconds to answer but I'm stumped. After I have clicked "Enable Tips" the text changes to "Disable Tips" as expected, but after you click "Disable Tips" the text doesn't reset to "Enable Tips" again. Any ideas what I'm doing wrong?
// function to toggle tips
$(document).ready(function(){
$(".help").hide();
document.getElementById("help_trigger").innerHTML = "Enable Tips";
$("a#help_trigger").click(function(){
$(".help").toggle("400");
document.getElementById("help_trigger").innerHTML = "Disable Tips";
return false;
});
});
HTML
<a id="help_trigger" href="">Enable Tips</a>
<div class="help" style="display: none">something</div>
<div class="help" style="display: none">something else</div>

In your click handler, you need to test for the current value and set it to the opposite. Since you're using jQuery already, you really ought to use it for everything.
$(function(){ // short-hand is cleaner, IMO
$(".help").hide();
$("#help_trigger")
.text( "Enable Tips" )
.click(function(){
var $this = $(this);
$(".help").toggle("400");
if ($this.text().match(/Disable/i)) {
$this.text("Enable Tips");
}
else {
$this.text("Disable Tips");
}
return false;
});
});

Just put this in place instead of your click function
$('a#help_trigger').click(function(){
if ($(this).html().trim() == 'Disable Tips') {
$(this).html('Enable Tips');
} else {
$(this).html('Disable Tips');
}
return false;
})
This will toggle the value depending on what the current HTML is. Keep in mind that the HTML has to be exact! Otherwise use a variable to check state and switch.

you can try something like this OR this
$("a#help_trigger").toggle(function (){
$(this).text("Enable Tips");
}, function(){
$(this).text("disable Tips ");
});
DEMO