Develop Reference

Why can't I change my disabled checkbox to enable?

Simple question, so I made sure to try and a lot of solutions before posting this. I have a checkbox and I can't seem to enable it.
With vanilla JS, I've tried removing the attribute, as well as setting the disabled flag to false, and also using jQuery i've tried to use the Prop to no success.
'''html
<input type="checkbox" id="chkAllowToAdminService" name="chkAllowToAdminService" disabled="disabled" data-init-plugin="switchery">
'''
I've tried the following and none of them are working (vanilla JS and jQuery)
'''
document.getElementById('chkAllowToAdminService').disabled = false;
document.getElementById('chkAllowToAdminService').removeAttribute('disabled);
$('#chkAllowToAdminService').prop("disabled", false);
'''
No error messages at all, just nothing seems to be happening.

To remove attribute you may use removeAttribute(name). In your case:
const checkbox = document.querySelector('#chkAllowToAdminService')
checkbox.removeAttribute('disabled')
To set attribute setAttribute(name, value).

// In jQuery
$('#chkAllowToAdminService').attr('disabled','disabled'); // Add disabled
$('#chkAllowToAdminService').removeAttr('disabled',''); // Remove disabled
// OR
$("#chkAllowToAdminService").attr("disabled",true);
$("#chkAllowToAdminService").attr("disabled",false);
// In JavaScript
document.getElementById("chkAllowToAdminService").disabled = true;
document.getElementById("chkAllowToAdminService").disabled = false;

I think you might have two issue :
make sure you have unique id of element 'chkAllowToAdminService' no other element have same id.
in your remove attribute syntex : document.getElementById('chkAllowToAdminService').removeAttribute('disabled);
I can see quote ' is missing at last.

Get value of a check box in JavaScript?

I am a newbie to jquery.
I have this code written. I want to get the value of 'newValue' when the checkbox is checked. But this code returns 'undefined'.
Please can someone help to get the state of the checkbox: the return value should be true or false, 1 or 0.
$(tableCell).empty();
/Checkbox
$('<input type="checkbox" checked class="EditContactRow" style="width: 20%" />').appendTo($(tableCell)).val(controlValue).blur(function () {
var newValue = $(tableCell).find('checkbox').val();
.....
.....
}
Thanks

Ahoy, Olumide Omolayo
your code seems a little bit messy but it can be fixed for sure. Where is your HTML, would you please add it to your question?
If you need an example: if you have a checkbox you would take it's value by selecting it like this
var myCheckboxValue = $('#myCheckbox').val();
your code:
$('<input type="checkbox" checked class="EditContactRow" style="width: 20%" />')
will not work. since $() is used to access jQuery selectors, those SELECT an element in the HTML/DOM, then you do something with the element. (see this video)
If you want to ADD an element to the HTML/DOM you'd probably use something like
$("#myDiv").html('my html that will be added to the element with id="myDiv"');
Hope this helps. Feel free to ask more :)
P.S. If you post your full code here, we might able to help you much more than just write at random here. People might be able to actually give you the fixed version :)

just a small syntax error.
Change this line var newValue = $(tableCell).find('checkbox').val();
to
var newValue = $(tableCell).find('input[type="checkbox"]').val();
The problem was .find('checkbox') you are trying to find a element who's name is checkbox and you dont have one.. the attempt should be to find a element 's whos type is "checkbox" so use the syntax .find('input[type="checkbox"]')

Correct answer to my question from Reddy
var newValue = $(tableCell).find('input[type="checkbox"]').val();
Thank you all

jQuery - How to aply custom CSS to fields which are not empty

I have some fields with class="required" which has custom css.
When i submit the form, i see an custom error message which aplies the required fields the css:
$(".required").addClass('required-fields');
Now, when i complete some fields (not all required) and i submit again de form, maybe what i need to see is: in the fields which have data (not empty), should go another css. Like border green or something like that.
Is it possible to do with a for maybe?

You could try something like this:
$('.required').removeClass('ok').filter(function(){
return !!$(this).val();
}).addClass('ok');
It filters all required fields with a value and adds class 'ok';
http://jsfiddle.net/cHPS2/

You can check if the input has a value. For example if($("#nameInput).value) will be true if its not blank. You can add a class to those inputs.
for(var i=0;i<inputs.length;i++){
if(inputs[i].value){
//enter add class code here
}
}

You have to pass on every input with a Jquery selector like
var $fields = $('.field');
And check if the field is required or not and if a value is given or not like :
$fields.each(function ($field) {
if ($field.hasClass('required') && !$field.value) {
$field.addClass('required-fields');
}
else {
$field.addClass('green-fields');
}
});
It's a rapid draft :)

Form validation with user feedback is a sufficiently common requirement that you may wish to consider using a plugin rather than coding a custom solution (reinventing the wheel) each time:
http://jqueryvalidation.org/documentation

You may try something like following (Can't be more pecific because you didn't provide HTML):
$('.required').not('[value=""]').css(...);
Using css() you may change the look of your elements.
Update:
To add a class to them try this:
$('.required').not('[value=""]').addClass('className');
To remove a class and then add another class (Also you may use toggleClass) try this:
$('.required').not('[value=""]').removeClass('className').addClass('className');
An Example.

Try this:
$('input.required:text').filter(function() {
return $(this).val() == "";
}).css(...);

Change text color based on background color?

I've a pretty minimalistic site, so I want to add details to it, like a hidden theme switching. But I don't want to tell the user that the theme can be changed, so I want to hide the text.
I've tried this:
var tausta = $(body).css("background-color");
$('.piiloteksti').css("color",tausta);
But it doesn't do anything. What would be the correct approach?
A fiddle.

if($('.piiloteksti').css("color",tausta); is a wrong statement. Thats a syntax error! There shouldn't be any if here.
Either remove if
$('.piiloteksti').css("color",tausta);
or complete the if statement.
if($('.piiloteksti').css("color",tausta)){
// some other code
}
Also $(body) does not refer to anything. Use either $('body') or $(document.body)

I tried to modify CSS, and it works.
// javascript
var tausta = $('body').css("background-color");
if($('.piiloteksti').css("color") == tausta) {
alert(tausta);
}
// css (test)
body{background-color:red;}
.piiloteksti{color:red;}

The syntax of your the if statement was off a little. Also, body must be made a String literal.
var tausta = $("body").css("background-color");
$('.piiloteksti').css("color", tausta);
Example: http://jsfiddle.net/HbAHS/8/

You can hide the element with CSS
.piiloteksti{display:none;} Fiddle
OR if you think that would interfere with your layout then,
.piiloteksti{visibility:hidden;} Fiddle
Or you can just give transparent color to your piiloteksti elements
.piiloteksti{color:transparent;} Fiddle

Styling checkboxes & radio buttons

I want to use an image for an unchecked checkbox and another image for a checked checkbox. I don't want to add labels, classes or anything like that. I want to leave the HTML alone, have it just display <input type="checkbox" /> I don't mind using JavaScript or jQuery, as long as I can leave the HTML alone.
This is an example of what I'm looking for but it only works in Webkit browsers.
http://jsfiddle.net/7kScn/
Without adding labels, or classes or IDs, would there be a solution for this?

it might help to go for Jquery UI
Checkbox eg. http://jqueryui.com/button/#checkbox
Radio eg. http://jqueryui.com/button/#radio
gl hf

this looks like an interesting option, although it appears to be only in beta:
http://widowmaker.kiev.ua/checkbox/

Fun friday challenge, here's my somewhat hacky implementation. Keep in mind for a real app you'll have to include better input type targeting and more robust selectors:
JSFiddle:
http://jsfiddle.net/2RNVh/
$("input").each(function() {
var $this = $(this);
$this.hide();
var $image = $("<img src='http://refundfx.com.au/uploads/image/checkbox_empty.png' />").insertAfter(this);
$image.bind("click", function() {
var $checkbox = $(this).prev("input");
$checkbox.prop("checked", !$checkbox.prop("checked"));
checkImage();
})
function checkImage() {
if($image.prev("input").prop("checked")) {
$image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_full.png");
} else {
$image.attr("src", "http://refundfx.com.au/uploads/image/checkbox_empty.png");
}
}
});

Unfortunately, I must have not been clear, yes, there are very flexible and nice things you can do with jQuery, CSS (X)HTML and Whatever else... but in essence, they convert the input into a div. It was also hard to find something good for select drop downs. I ended up finding this for the select boxes and I am going to try to see if I can do something similar for checkboxes and radio buttons. http://bavotasan.com/2011/style-select-box-using-only-css/
I just found something perfect. http://acidmartin.wordpress.com/2011/06/23/imageless-css-3-custom-checkboxes-and-radio-buttons/
Although the colors and font is pretty ugly, it accomplishes what I needed it to, plus those are easy to change.