samedi 24 janvier 2015

Enable/Disable button using dynamically added checkbox's

I am working on a simple to-do list. Currently I have three buttons(enterBtn, completeBtn, deleteBtn)-all disabled on startup. The first one EnterBtn, gets enabled when the form is complete using jquery(works fine). Then when i submit form, javascript creates a < ul > that contains a span and a checkbox(also works fine). Now, I want to enable the completeBtn if/when any of the NEW checkbox items are checked. Can someone help me figure out how to toggle my complete button? The culmination is to use completeBtn to both enable when any checkboxes are clicked, and then i am planning on removing only the ones that where checked, but i'll get to that part on my own. The only help i need is to figure out the best way to go about this based on my code below.


I will //comment in spots where I've tested so far.


HTML



<input type="text" id="goalId">
<input id="completeBtn" value="Complete" type="button" disabled="disabled"/>
<ul id="log_data"></ul>


JavaScript



function disableFunction() {
document.getElementById("enterBtn").disabled = 'true';
}
function enableFunction(cbId) {
//tested here
}
function checkSpanStatus() {
alert("path works");
}
function updateItemStatus() {
var cbId = this.Id.replace("cb_","");
var itemText = document.getElementById("item_" + cbId);
if(this.checked) {
itemText.style.textDecoration = "line-through";
//document.getElementById("completeBtn").disabled = 'false'; <tried this>
enableFunction(); //and this
}else{
itemText.style.textDecoration = "none";
}
}

function addNewItem(list, itemText) {
totalItems++;

var listItem = document.createElement("ul");


var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.Id = "cb_" + totalItems;
checkbox.onclick = updateItemStatus;

var span = document.createElement("span");
span.id = "item_" + totalItems;
span.onclick = checkSpanStatus;
span.innerText = itemText;
listItem.appendChild(span);
listItem.appendChild(checkbox);
list.appendChild(listItem);
}
var totalItems = 0;
var inItemText = document.getElementById("goalId");
var form = document.getElementById("goalForm");
function btn1() {{
var itemText = inItemText.value;
if (!itemText || itemText == " ") {
return false
};
addNewItem(document.getElementById("log_data"), itemText);
form.reset();
disableFunction();
}
};




Aucun commentaire:

Enregistrer un commentaire