-1

フォームで作業しようとしています。現在、ボタンは無効になっています。ただし、チェックボックスをクリックすると、ボタンが有効になり、チェックボックスをクリックしていない場合は再び無効になります。チェックボックスをクリックしてもボタンが有効になりません。おそらく私のループに何か問題があります。ループは関数 checkAge にあります。解決策はありますか？

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

    }

}
4

1 に答える 1

2

チェックボックスを作成するとき、それらにイベントを添付しません。入力を無効にするループは、フォームの checkAge 部分を作成したときにのみ発生し、二度と実行されません。チェックボックスに偶数を付けると、問題が解決するはずです。

また、checkAge 関数はチェックボックスの入力をドキュメントに追加しますが、inputs配列を更新してチェックボックスを含めることはありません。

最初にすべての HTML 要素をページに追加し、display:none/display:block を使用して要素を非表示/表示することを検討することをお勧めします。

于 2013-02-08T18:52:27.303 に答える