Develop Reference

Input live check

i got a input field and a button
<input required id="solution" name="solution" type="text" placeholder=""class="form-control input-md">
<button style="background-color:#da251d;" id="sendForm" name="sendForm" class="btn btn-success">Send</button>
Now i want to check the input Field for an value, when the value is incorrect, the button should be disbaled, i try it with js like this
$(document).ready(function(){
$(“#solution”).keyup(function(){
if($(this).val() == ‘value’) {
$(‘#sendForm’).attr(‘disabled’,‘disabled);
}
else {
$(‘#sendForm’).removeattr(‘disabled’);
}
});
});
But it dont work, can you help me pls?

i think you did the typo error on .removeAttr
$(document).ready(function(){
$("#solution").keyup(function(){
if($(this).val() == "value") {
$("#sendForm").attr("disabled","disabled");
}
else {
$("#sendForm").removeAttr("disabled");
}
});
});

You should try to use the "change" or the "input" event. It would look similar to
$('#solution').on('change', function(){
// validation & toggle button state
})
For further event documentations:
change

Easy one!
The code does not work since you're using quotation marks (”) but what you should be using are the String marks (" or ').
The working code:
$(document).ready(function(){
$("#solution").keyup(function(){
if($(this).val() == 'value') {
$('#sendForm').attr('disabled', 'disabled');
}
else {
$('#sendForm').removeAttr('disabled');
}
});
});
Jsbin

Hey this is working fine ,
$("#solution").keyup(function(){
if($(this).val() == 'value') {
$('#sendForm').attr('disabled',false);
}
else {
$('#sendForm').attr('disabled',true);
}
});
You can use attr method for setting disabled property as true or false as per your need.
demo

Input checked attribute not working after confirm dialog cancel

I have a checkbox that when unchecked I want to confirm that the user intended to do so.
I am listening to the on.change event and use confirm() for the dialog. If the user clicks "Cancel" I have code to reset the checkbox. However, it is not obeying it. The 'checked="checked"' attribute is placed there as expected, but it does not appear as checked.
Here's a JSFiddle illustrating it:
https://jsfiddle.net/0tvzLbgk/9/
Below is the code.
$('#box').on('change', 'input', function() {
var $me = $(this);
if (this.checked) {
// Item has been checked, do nothing
}
else {
// Item has been unchecked
// Make sure it was not an accident
var confirmReset = confirm("Reset checkbox?");
if (confirmReset == true) {
// Okay, reset
}
else {
// Mistake, mark as checked again
$me.attr('checked', 'checked');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<input type="checkbox" />
</div>
Does anyone know why it's not following the checked attribute?

use .prop not .attr
$me.prop('checked', true);

Use prop() insead of attr() since you need to change the property here not the attribute :
$me.prop('checked', 'checked');
Hope this helps.
( Take a look to .prop() vs .attr() )
$('#box').on('change', 'input', function() {
var $me = $(this);
if (this.checked) {
// Item has been checked, do nothing
}
else {
// Item has been unchecked
// Make sure it was not an accident
var confirmReset = confirm("Reset checkbox?");
if (confirmReset == true) {
// Okay, reset
}
else {
// Mistake, mark as checked again
$me.prop('checked', 'checked');
$me.addClass('shift-input');
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<input type="checkbox" />
</div>

Deleting value in hiddenfield when checkbox is unchecked jquery

I am pretty new with jquery and javascript. But i have made this function. When a checkbox is checked, it's value get set in a hiddenfield. Here is the function.
<script>
$('#checkDk').on('change', function () {
$('#MainContent_hiddenTargetDk').val($(this).val());
console.log($("#MainContent_hiddenTargetDk").val());
});
</script>
I dont know if this is the best way of doing it, but it works. The problem is when the checkbox is unchecked the value does not get deleted from the hiddenfield. I have been searching a bit around and found this.
var value = this.checked ? this.value : "";
Can you somehow use this to check if it is checked or not? And if yes how do i incorporate it in my function?
Here is the checkbox html.
<input id="checkDk" type="checkbox" value="208" onselect="getvalue()" autocomplete="off">

This should work:
<script>
$('#checkDk').on('change', function () {
$('#MainContent_hiddenTargetDk').val( $(this).prop("checked") ? $(this).val(): "");
console.log($("#MainContent_hiddenTargetDk").val());
});
</script>

$('#checkDk').on('change', function () {
if(this.checked){
var hidden = $('<input />').attr('type', 'hidden')
.addClass('chooseNameHere')
.val($(this).val());
$('#yourFormId').append(hidden);
}else{
$('#yourFormId').find('input[name=chooseNameHere]').remove();
}
});

$("#your_checkbox").prop("checked") should return true or false indicating if the checkbox is checked or not.
Try that instead of val()

Try
<script>
$('#checkDk').on('change', function () {
if (this.checked) {
$('#MainContent_hiddenTargetDk').val($(this).val());
console.log($("#MainContent_hiddenTargetDk").val());
} else { $('#MainContent_hiddenTargetDk').val(''); }
});
</script>

How do I change the color of my DIV when checkbox is checked?

I want to change the color of the DIV when a checkbox is checked. I want to do this in jQuery. I have tried this :
if($('#checkboxTest').is(':checked'))
{
$('.alertWrapper').css('background-color', 'blue');
}
But it is not working.. any help?

You need to use .change() event to keep track of the state of your checkbox:
$('#checkboxTest').change(function() {
if($(this).is(':checked'))
{
$('.alertWrapper').css('background-color', 'blue');
} else {
// Your code here will fired when the checkbox is unchecked
}
}).change(); // <-- Trigger the change event on page load

You need to use change event :
$('#checkboxTest').change(function() {
var c = this.checked ? 'blue' : 'transparent';
$('.alertWrapper').css('background-color', c);
});
Working demo

You can use the following (with click event):
$('#checkboxTest').click (function ()
{
var thisCheck = $(this);
if (thischeck.is (':checked'))
{
// your stuff
}
});

jQuery if checkbox is selected do this

I have two div elements that are hidden on $(document).ready(function(){} and they are supposed to appear if their specific check box is checked, and disappear if it was checked and then unchecked. I can show the element when the checkbox is selected very easily using show() or slideDown() but when i use the if else statements it returns as false everytime and the forms stay hidden...
$(document).ready(function(){
if($("#upload_yes").is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
if($("#new_info_yes").is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});

You aren't binding this code to the proper event:
$(document).ready(function() {
$("#upload_yes").on('change', function() {
if ($(this).is(':checked')) {
$("#upload_form").show();
$("#new_info_form").slideDown(500);
} else {
$("#upload_form, #new_info_form").hide();
}
});
});

See this fiddle
You must do the job in the change event.
then calling .trigger('change') on the check boxes make the div show/hide on the initial page load.
The code :
$(document).ready(function(){
$('input#upload_yes').change(function(){
if($(this).is(':checked')) {
$("#upload_form").show();
} else {
$("#upload_form").hide();
}
});
$('input#new_info_yes').change(function(){
if($(this).is(':checked')) {
$("#new_info_form").slideDown(500);
} else {
$("#new_info_form").hide();
}
});
//Trigger the change event so the divs are initially shown or hidden.
$('input[type=checkbox]').trigger('change');
});

To evaluate if something has changed you need to do your code inside an event! (in this case: change) because what you are doing is to get the value of is(':checked') just at $(document).ready and it will always return false because at first moment your element wasn't checked.
Well, this is the correct way :-)
(I tried to reduce code)
Live Demo:
http://jsfiddle.net/oscarj24/RSDRg/
Code:
$(document).ready(function() {
$('#upload_yes').on('change', function() {
var done = $(this).is(':checked');
if(done) {
$('#upload_form').show();
$('#new_info_form').slideDown(500);
} else {
var frm = $('#upload_form').add('#new_info_form');
frm.hide();
}
});
});