enable and disable button is not working [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 9 years ago.

I am trying to work on a form. Currently, the button is disabled. But when you click on a checkbox, the button should be enable, and then disabled again if you dont have a checkbox clicked on. I cant get the button to become enabled when i click on a checkbox. Probably something wrong with my loop. The loop is in function checkAge. Any solution?

Javascript

function checkAge(e){

var theTarget = e.target ? e.target : e.srcElement;
alert(theTarget.id);

var form = document.getElementById("form");
if (document.getElementById("content")) {
    form.removeChild(document.getElementById("content"));
}

if(theTarget.id == "fourteen"){
    var newDiv = document.createElement("div");
    newDiv.setAttribute("id", "content");

    var br = document.createElement("br");
    newDiv.appendChild(br);
    var br = document.createElement("br");
    newDiv.appendChild(br);

    newDiv.appendChild(document.createTextNode("Vilka seriefigurer träffade du?"));

    var br = document.createElement("br");
    newDiv.appendChild(br);

    var musse = document.createElement('input');
    musse.setAttribute("type", "checkbox");
    musse.setAttribute("name", "musse");
    musse.setAttribute("value", "musse");
    musse.setAttribute("id", "musse");
    newDiv.appendChild(musse);
    newDiv.appendChild(document.createTextNode("Musse"));

    var br = document.createElement("br");
    newDiv.appendChild(br);

    var adi = document.createElement('input');
    adi.setAttribute("type", "checkbox");
    adi.setAttribute("name", "adi");
    adi.setAttribute("value", "adi");
    adi.setAttribute("id", "adi");
    newDiv.appendChild(adi);
    newDiv.appendChild(document.createTextNode("Ådi"));

    var br = document.createElement("br");
    newDiv.appendChild(br);

    var bamse = document.createElement('input');
    bamse.setAttribute("type", "checkbox");
    bamse.setAttribute("name", "bamse");
    bamse.setAttribute("value", "bamse");
    bamse.setAttribute("id", "bamse");
    newDiv.appendChild(bamse);
    newDiv.appendChild(document.createTextNode("Bamse"));

    var br = document.createElement("br");
    newDiv.appendChild(br);

    var input = document.createElement("input");
    input.setAttribute("type", "submit");
    input.setAttribute("name", "submit");
    input.setAttribute("id", "submit");
    input.setAttribute("value", "Skicka");
    newDiv.appendChild(input);

    form.appendChild(newDiv);

    var inputs = document.getElementsByTagName("input");
    for(i=0; i<inputs.length; i++){
        input.disabled = true;
        if(inputs[i].type == "checkbox" && inputs[i].checked){
            input.disabled = false;
        }
        else{
            input.disabled = true;
        }

    }

}

Answer 1

When you create the checkboxes, you don't attach any events to them. Your loop to disable the input only happens when you create the checkAge part of the form, and never executes again. If you attach an even to the checkboxes, then it should solve your problem.

Also, your checkAge function adds the checkbox inputs to the document, but you never update your inputs array to include the checkboxes.

You may want to consider adding all the HTML elements to the page initially, and using display:none/display:block to hide/show the elements.