Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perfect

Qasim Hafeez
Qasim Hafeez
12,731 Points
Posted by Qasim Hafeez
Qasim Hafeez
12,731 Points

Disabling checkbox issue

I wanted the checkbox to be disabled while the user is editing the task. Here is the relevant code 

var editTask = function(){

    var listItem = this.parentNode;
    var editableInput = listItem.querySelector('input[type=text]');
    var label = listItem.querySelector('label');
    var containsClass = listItem.classList.contains("editMode");
    var checkbox = listItem.querySelector('input[type=checkbox]');


    if (containsClass){

        label.innerText = editableInput.value;
        checkbox.disabled=false;

    } else {
        editableInput.value = label.innerText;
        checkbox.disabled=true;
    }
    listItem.classList.toggle("editMode");

}

This code works but, I don't understand why. The first time I tried it, the 'true' and 'false' values were in the opposite places (where it made sense for me to put them) and the code did not work. The checkbox was not disabled while editing and only became disabled after I finished editing and clicked "edit". Does anyone know why this is the case?

1 Answer

John Shockey
John Shockey
45,061 Points
John Shockey
John Shockey
45,061 Points

Hi Qasim,

I think you were just over thinking it! Happens to everyone!

To break it down: If: it is in edit mode you want to set the disabled checkbox to false to enable it.

Else: it is NOT in edit mode you want the disabled checkbox to remain true (disabled).

Qasim Hafeez
Qasim Hafeez
12,731 Points
Qasim Hafeez
Qasim Hafeez
12,731 Points

"Else: it is NOT in edit mode you want the disabled checkbox to remain true (disabled)"

No, when editMode is not present I want the checkbox to be functional. When editMode is present I want the checkbox disabled, so that the task can't be moved from one list to the other.