I'm hoping this is something silly I've done. I got a function unigref near the bottom, which (I believe) outputs a string. However, when I call the function to build a jQuery selector, I can't get it to work properly. I know that everything else works because when I use a static string the radio button is selected.
Here's my jsfiddle/9Edxx. Please help.
var checkCount = 0;
var maxChecks = 2;
$(document).ready(function() {
$("#test").click(function() {
alert($(':checked').length);
});
$(':checkbox[name=checkbox]').change(function() {
checkCount = $(':checkbox:checked').length;
if (checkCount >= maxChecks) {
$(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
$(":radio[value="+uniqref()+"]").prop('checked', true);
} else {
$(':checkbox[name=checkbox]:disabled').attr('disabled', false);
}
if (this.checked) {
$("td.label").append("<label>" + this.value + "</label>");
} else {
$("td.label").find(":contains('" + this.value + "')").remove();
}
});
$('#button').click(function() {
alert(uniqref());
});
function uniqref() {
return $("td.label").text().split('').sort().join('').replace(/\s/g, "");
}
});
UPDATE: The typo has been correct, but the problem still exists.
http://jsfiddle.net/9Edxx/
Yeah it's really silly: It's just a typo.
$(":radio[value="+unigref()+"]").prop('checked', true);
should be
$(":radio[value="+uniqref()+"]").prop('checked', true);
with a lowercased Q instead of a G.
Also, you're calling uniqref() before actually updating the value of td.label.
Should be in this order:
if (this.checked) {
// ...
}
if (checkCount >= maxChecks) {
// ...
}
http://jsfiddle.net/7mvmT/7/
http://jsfiddle.net/7mvmT/6/
Basically this line:
$(":radio[value="+uniqref()+"]").prop('checked', true);
is called prematurely (before the checkbox is actually checked. A simple, ugly hack:
setTimeout(function(next) {
$(":radio[value="+uniqref()+"]").prop('checked', true);
}, 0);
solves it.
Also you had a typo as Niko mentioned.
No need for hack.
http://jsfiddle.net/dn7gM/
p.s.: only works for the 2 first radios, since not all ids are setted correctly ;-)
Related
I have a form which consists of some elements such as a select-input and a checkbox.
The submit-button is disabled and I want to enable the button only if two conditions are fulfilled. An initial version works well, but only if clicking on the checkbox is the last step. But it should be a function that reacts on both, clicks/changes in the select and the checkbox.
The following code is working but with the problem explained above.
$('#toscheck').click(function() {
if ($(this).is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
The following solution doesn't work:
$('document').ready(function() {
if ($('#toscheck').is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
But how can I solve this? What I have found on SO wasn't really helpful.
Again: it should work as following; if the checkbox is selected AND the selected option has a value, the button would be enabled.
Thanks in advance.
First, store you element in variables:
let $toscheck = $('#toscheck'),
$ctry = $("#ctry"),
$pjo = $('#pjo'),
$sjo = $('#sjo');
Then, create your validation function with the stored variables. Note that I replace attr and removeAttr with .prop, it is better:
function checkThings(){
if ($toscheck.is(':checked') && $ctry.val().length > 0) {
$pjo.prop('disabled', false);
$sjo.prop('disabled', false);
} else {
$pjo.prop('disabled', true);
$sjo.prop('disabled', true);
}
}
Then, bind the events:
$toscheck.add($ctry).on( 'change', checkThings );
Note that I used change on both elements since it does work with inputs and checkboxes.
Final code :
let $toscheck = $('#toscheck'),
$ctry = $("#ctry"),
$pjo = $('#pjo'),
$sjo = $('#sjo');
function checkThings(){
if ($toscheck.is(':checked') && $ctry.val().length > 0) {
$pjo.prop('disabled', false);
$sjo.prop('disabled', false);
} else {
$pjo.prop('disabled', true);
$sjo.prop('disabled', true);
}
}
$toscheck.add($ctry).on( 'change', checkThings );
$(document).ready(function() {
$('#toscheck,#ctry').change(function() {
if ($('#toscheck').is(':checked') && $("#ctry").val().length > 0) {
$('#pjo').removeAttr('disabled');
$('#sjo').removeAttr('disabled');
} else {
$('#pjo').attr('disabled', 'disabled');
$('#sjo').attr('disabled', 'disabled');
}
});
});
use this code
.change function detects change and then on call check whether your AND condition is met or not
and add #toscheck in quotes i.e. '#toscheck'
$('#toscheck,#xyz,#abc').change()
for detecting change for multiple elements
I have one question.
I am trying to make a addClass, removeClass button function for after the text length > 5 or something else.
So the addClass working fine in my code but removeClass doesn't work. What I am missing here or what I am doing wrong here anyone can help me in this regard ?
I have tried the following code also please click for DEMO:
// Keypress for active inactive button
$(".PGA51c").on('keyup', function() {
var ID = $(this).attr('data-id');
var cm = $('#PCm' + ID);
if (cm.text.length < 5) {
$('#sev' + ID).addClass('tCo');
console.log('OK');
} else {
$('#sev' + ID).removeClass('tCo');
console.log('Not OK');
}
});
});
Use text() instead of text in if condition.
$(".PGA51c").on('keyup', function() {
var ID = $(this).attr('data-id');
var cm = $('#PCm' + ID);
if (cm.text().length < 5) {
//-----^^^^^^--------------
$('#sev' + ID).addClass('tCo');
console.log('OK');
} else {
$('#sev' + ID).removeClass('tCo');
console.log('Not OK');
}
});
I'm trying to remove a option with value equal to MRW if #natural_person_lives_in_ccs_0 is checked but if I unchecked the checkbox then the SELECT should be as it was by default meaning same options. This is what I did:
$(document).ready(function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
But it's not working since Option1 is added by default and I don't know how to write this. I think to use .toggle() but don't know if it's the right one. I leave a Plunker here for testing. Any help on this?
Steps:
Check Yes option value=MRW should be removed
Remove the check from Yes option value=MRW as by default (same position)
Try to use the .change() function to accomplish your task here,
$('#natural_person_lives_in_ccs_0').click(function () {
var elem = $(".shipping_from option[value='MRW']");
if (this.checked) {
elem.remove();
} else if (elem.length == 0) {
$(".shipping_from").prepend('<option value="MRW">Option1</option>');
}
});
DEMO
The best way would be,
$('#natural_person_lives_in_ccs_0').click(function () {
$(".shipping_from option[value='MRW']").toggle(!this.checked);
$(".shipping_from option:eq(" + ((this.checked) ? 1 : 0) + ")").prop('selected', true);
});
DEMO
Write your script like bellow.
var showOptionsAcorrdingCheckbox = function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
}
$(document).ready(function(){
$(':checkbox').change(showOptionsAcorrdingCheckbox);
});
DEMO
code:
$(document).ready(function(){
$(document).on('change', '#natural_person_lives_in_ccs_0', function(){
if($(this).is(':checked'))
{
$(".shipping_from option[value='MRW']").remove();
}
else
{
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
});
How do you make a JavaScript function have a false option, which makes sure the function doesn't execute?
Here's the code:
function deleteExtraRows(tableID){
tableID = '#'+tableID;
$(tableID+' tr').each(function(){
if($(tableID+' tr').length>1){
$(this).remove();
}
});
}
I want to also be able to give it a (false) option, so I can run deleteExtraRows(false), which will not make the function run. I know this seems kind-of backwards, but it would fit in the project I'm working on if I can do this.
Please help!
This should do the trick:
function deleteExtraRows(tableID){
if(tableID === false)
return;
....
}
It is important to use === as opposed to == since === checks the type as well. If tableID were 0 or an empty string, it would evaluate to true and return as well.
What you have should already work if there isn't an element on the page with an id of false.
Do it like this
function deleteExtraRows(tableID){
if(!tableID)
return;
tableID = '#'+tableID;
$(tableID+' tr').each(function(){
if($(tableID+' tr').length>1){
$(this).remove();
}
});
}
just do return
return stops the execution of the function..
function deleteExtraRows(tableID, valid ){
if(!valid)
return;
tableID = '#'+tableID;
$(tableID+' tr').each(function(){
if($(tableID+' tr').length>1){
$(this).remove();
}
});
}
Try this:
function deleteExtraRows(tableID, doWork){
if (!doWork) return;
tableID = '#'+tableID;
$(tableID+' tr').each(function(){
if($(tableID+' tr').length>1){
$(this).remove();
}
});
}
where is it being called?
just do:
if(!!tableID) deleteExtraRows(tableID);
I'd suggest Greg's answer above, but thought that you can optimize your code a bit by rewriting it like this:
function deleteExtraRows (tableID) {
if (tableID === false) {
return;
}
$('#' + tableID).find('tr:not(:last)').remove();
}
... unless I'm misinterpreting your code there.
I have been struggling with getting this work on Firefox. Hope there is somebody help me!
Basically; Firefox ignores the button click function and it's sub functions and the button posts the page instead of running the jquery code.
It works on IE and Chrome but not on Firefox.
Thank you for your help in advance.
Here is the output code:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".CatList li").click(function() {
if ($(this).is(".selected")) {
$(this).attr("class", "");
$('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
return false;
}
else {
$(this).attr("class", "selected");
$('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
return false;
}
});
$("#ctl00_ContentPlaceHolderRight_btnSave").click(function() {
var elements = $("li.selected");
if (elements.val() == null) {
alert("You must select at least one category");
return false;
}
else {
elements.each(function() {
$('#ctl00_ContentPlaceHolderRight_CatChecked').val($('#ctl00_ContentPlaceHolderRight_CatChecked').val() + "," + $(this).attr("id"));
return true;
});
}
});
});
</script>
Do you know firebug Firefox Extension? It is very useful for debug Javascript on Firefox.
Firebug also include a Javascript console where you can test your functions.
Don't check against null -- try to stick with the undefined that jQuery ensures. Check what elements.val() returns to start (just alert it).
Also, you don't preventDefault() or return false in the else clause which could be a reason for Firefox to submit the page.
Thank you tjko, using alert saved my day. I was just too confused. I have changed the code as below and everything works perfectly:
var elements = $("li.selected");
elements.each(function() {
$('#<%=CatChecked.ClientID%>').val($('#<%=CatChecked.ClientID%>').val() + "," + $(this).attr("id"));
});
if ($('#<%=CatChecked.ClientID%>').val() == "") {
alert("You must select at least one category");
return false;
}
else {
//alert($('#<%=CatChecked.ClientID%>').val());
return true;
}