We Keep Coding

Change background color with checkbox, limited number of checkboxes selectable

Desired: User can only click on 2 out of 3 displayed checkboxes; when the user clicks on a checkbox, the checkbox background turns orange.
Currently: The first checkbox selected acts as desired. The second checkbox ticks, but does not change background color. Upon clicking again, it un-ticks and changes to the desired background color (yet it is not selected). A 3rd checkbox is not selectable whilst two are already selected.
Requesting: Help to achieve the desired, thank you!
Fiddle: http://jsfiddle.net/0fkn1xs4/
Code:
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected < selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
}
$(this).closest("li").toggleClass("checked", this.checked);
});
A slightly cleaner implementation that does what you want. Check out the JSFiddle

Try this:
$('input.playerCheckbox').on('change', function (event) {
var selectableFriends = 2;
if ($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
} else {
$(this).closest("li").toggleClass("checked");
}
numberCurrentlySelected = $('.playerCheckbox:checked').length;
});
Check it out here: JSFIDDLE

$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
var numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected > selectableFriends) {
this.checked = false;
}
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
});
I just changed the second part to <= rather than < and then created the numberCurrentlySelected variable earlier on so that you aren't calling querying more than once. Caeths is better though instead of using a second if statement it just uses an else, makes sense and gets rid of a comparison.

DEMO
$('input.playerCheckbox').on('change', function(event) {
var selectableFriends = 2;
numberCurrentlySelected = $('.playerCheckbox:checked').length;
if(numberCurrentlySelected <= selectableFriends) {
$(this).closest("li").toggleClass("checked");
}
if($('.playerCheckbox:checked').length > selectableFriends) {
this.checked = false;
$(this).closest("li").removeClass('checked');
}
});

This works in Fiddler for ya.
$('.playerCheckbox').change(function() {
if($('.playerCheckbox:checked').length > 2) {this.checked = false; }
else{
if( this.checked == true ) {$(this).closest("li").addClass("checked");}
if( this.checked == false ) {$(this).closest("li").removeClass("checked");}
}
});

How to make expand all/collapse all button in this certain script?

i would like to ask for help in a simple task i really need to do at my work (I am a javascript newbie). I made a simple collapsible list with script provided by this guy http://code.stephenmorley.org/javascript/collapsible-lists/ but what i need right now are two simple buttons as stated in the title: expand all and collapse whole list. Do you guys know if something like that can be implemented in this certain script? Please help :)
var CollapsibleLists = new function () {
this.apply = function (_1) {
var _2 = document.getElementsByTagName("ul");
for (var _3 = 0; _3 < _2.length; _3++) {
if (_2[_3].className.match(/(^| )collapsibleList( |$)/)) {
this.applyTo(_2[_3], true);
if (!_1) {
var _4 = _2[_3].getElementsByTagName("ul");
for (var _5 = 0; _5 < _4.length; _5++) {
_4[_5].className += " collapsibleList";
}
}
}
}
};
this.applyTo = function (_6, _7) {
var _8 = _6.getElementsByTagName("li");
for (var _9 = 0; _9 < _8.length; _9++) {
if (!_7 || _6 == _8[_9].parentNode) {
if (_8[_9].addEventListener) {
_8[_9].addEventListener("mousedown", function (e) {
e.preventDefault();
}, false);
} else {
_8[_9].attachEvent("onselectstart", function () {
event.returnValue = false;
});
}
if (_8[_9].addEventListener) {
_8[_9].addEventListener("click", _a(_8[_9]), false);
} else {
_8[_9].attachEvent("onclick", _a(_8[_9]));
}
_b(_8[_9]);
}
}
};
function _a(_c) {
return function (e) {
if (!e) {
e = window.event;
}
var _d = (e.target ? e.target : e.srcElement);
while (_d.nodeName != "LI") {
_d = _d.parentNode;
}
if (_d == _c) {
_b(_c);
}
};
};
function _b(_e) {
var _f = _e.className.match(/(^| )collapsibleListClosed( |$)/);
var uls = _e.getElementsByTagName("ul");
for (var _10 = 0; _10 < uls.length; _10++) {
var li = uls[_10];
while (li.nodeName != "LI") {
li = li.parentNode;
}
if (li == _e) {
uls[_10].style.display = (_f ? "block" : "none");
}
}
_e.className = _e.className.replace(/(^| )collapsibleList(Open|Closed)( |$)/, "");
if (uls.length > 0) {
_e.className += " collapsibleList" + (_f ? "Open" : "Closed");
}
};
}();

It is important to understand why a post-order traversal is used. If you were to just iterate through from the first collapsible list li, it's 'children' may (will) change when expanded/collapsed, causing them to be undefined when you go to click() them.
In your .html
<head>
...
<script>
function listExpansion() {
var element = document.getElementById('listHeader');
if (element.innerText == 'Expand All') {
element.innerHTML = 'Collapse All';
CollapsibleLists.collapse(false);
} else {
element.innerHTML = 'Expand All';
CollapsibleLists.collapse(true);
}
}
</script>
...
</head>
<body>
<div class="header" id="listHeader" onClick="listExpansion()">Expand All</div>
<div class="content">
<ul class="collapsibleList" id="hubList"></ul>
</div>
</body>
In your collapsibleLists.js
var CollapsibleLists =
new function(){
...
// Post-order traversal of the collapsible list(s)
// if collapse is true, then all list items implode, else they explode.
this.collapse = function(collapse){
// find all elements with class collapsibleList(Open|Closed) and click them
var elements = document.getElementsByClassName('collapsibleList' + (collapse ? 'Open' : 'Closed'));
for (var i = elements.length; i--;) {
elements[i].click();
}
};
...
}();

to disable required field validator

this is my javascript code here i am unable to disable the textbox(id="due_Date") when i get the zero or negative amount in text feild (id="subtotal_input")...any help would be appreciated....
<script>
window.onload = function()
{
document.getElementById('subtotal_input').onchange = disablefield;
document.getElementById('phone_no').onchange = disablefield;
document.getElementById('phone_yes').onchange = disablefield;
}
function disablefield()
{
if ( document.getElementById('subtotal_input').value <= 0 )
{
document.getElementById('due_Date').value = '';
document.getElementById('due_Date').disabled = true
}
if ( document.getElementById('phone_no').checked == true )
{
document.getElementById('ReturnDate').value = '';
document.getElementById('ReturnDate').disabled = true}
else if (document.getElementById('phone_yes').checked == true ){
document.getElementById('ReturnDate').disabled = false;
}
}

You can use ValidatorEnable(validator, enable) to enable or disable a validator.
You can use something like this:
objValidator = document.getElementById("<%=YourRequiredValidatorID.ClientID %>");
objValidator.enabled = true; //'true' if you want to enable else 'false'
ValidatorUpdateDisplay(objValidator);
Let me know if it works for you!

Js and Divs, (even <div> is difference)

I Have find a javascript code that works perfectly for showing a DIV.
but this code works only for showing one div for each page.
i want to include many DIVS for hiding and showing in the same page.
I was try to replace the div id and show/hide span id with a rundom php number for each include, but still is not working.
so how i have to do it?
the JS code:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};

Check out the Fiddle, you can edit code based on your needs ;)
$(function() {
$('.sub-nav li a').each(function() {
$(this).click(function() {
var category = $(this).data('cat');
$('.'+category).addClass('active').siblings('div').removeClass('active');
});
});
});

finaly i found my self:
<a class="showhide">AAA</a>
<div>show me / hide me</div>
<a class="showhide">BBB</a>
<div>show me / hide me</div>
js
$('.showhide').click(function(e) {
$(this).next().slideToggle();
e.preventDefault(); // Stop navigation
});
$('div').hide();
Am just posting this in case someone was trying to answer.

Change div class to Active once clicked or Deactive if clicked again

When I click my link the div changes to active and ajax is loaded.
But how can I then say if the link is clicked again that it should become deactive?
favourite.onclick = function() {
loadXMLDoc('indexFavourite');
favourite.className = 'statusOptionActive';
}

favourite.onclick = function() {
loadXMLDoc('indexFavourite');
var linkclass = favourite.className;
if(linkclass == 'statusOptionDeactive')
favourite.className = 'statusOptionActive';
else
favourite.className = 'statusOptionDeactive';
}

Try this.
favourite.className = (favourite.className == 'statusOptionActive') ? 'statusOptionDeactive' : 'statusOptionActive';
The above checks if the current className is statusOptionActive. If yes, it changes the className to statusOptionDeactive. If no, it sets it as statusOptionActive.
Fiddle

You can have a global variable like:
var isDivActive = false;
Which is false by default.
favourite.onclick = function() {
loadXMLDoc('indexFavourite');
if (isDivActive) {
favourite.className = 'statusOptionActive';
}
else {
favourite.className = '';
}
isDivActive = !isDivActive;
}