Enable/Disable button using dynamically added checkbox's

Question

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();
}
};

Artur Filipiak · Accepted Answer · 2015-01-24 23:15:10Z

1

The reason why you can't disable buttons is that you should use boolean instead of string:

your_button.disabled = true;
your_button.disabled = false;

JSFiddle (using your script)

edited Jan 24, 2015 at 23:15

answered Jan 24, 2015 at 22:58

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

MrEhawk82 Over a year ago

Thank You Phillip. i should have just done that to begin with. Here i am trying to be all fancy. I can deduce what you did with the JS fiddle, that was very helpful.

MrEhawk82 Over a year ago

wow you did alot. I wish i had the reputation to give you a +1.

Artur Filipiak Over a year ago

@MrEhawk82, Glad I could help. You can just accept the answer ✓ :-)

MrEhawk82 Over a year ago

gotcha, slipped my mind. (i have four kids, so that happens). On your code: i did change the location of enableFunction(completeBtn); i put it in the function updateItemStatus(). That way the completeBtn booleon will toggle just like the removeBtn. which is doing exactly what i wanted it to. awesome.

MrEhawk82 Over a year ago

i also put "&& inputElems[i].checked === true" in the function submitboxes(). That way the complete button will push the selected data.

|

Collectives™ on Stack Overflow

Enable/Disable button using dynamically added checkbox's

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related