チェックボックスがオンのときに追加入力テキストボックスを無効にする方法javascript

Question

追加されたテキストボックスのチェックボックスがオンになっているときに、テキストボックスを無効にしたいとします。チェックボックスをオンにすると、ハードコードされたテキストボックスは無効になります。 コードスニペットを実行して結果を確認するか、以下に示すスクリーンショットを表示します。以下は

document.getElementById('venueTB') iは最初要素を返すので、それはだmain.jsとmain.htmlをファイル

<!--main.js--> 
 

 
var counter = 0; 
 

 
function addMore() { 
 
    counter++; 
 
    var objNewDiv = document.createElement('div'); 
 
    objNewDiv.setAttribute('id', 'addProg' + counter); 
 
    objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox()"> <label for="venueChk' + counter + '" >No Venue</label> </div>'; 
 
    document.getElementById('newProg').appendChild(objNewDiv); 
 
} 
 

 
function removeProg() { 
 
    if (0 < counter) { 
 
    document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter)); 
 
    counter--; 
 
    } else { 
 
    alert("No boxes to remove"); 
 
    } 
 
} 
 

 
function checkBox() { 
 
    var checkElement = document.getElementById('venueTB'); 
 
    var checkDisabled = checkElement.disabled = true; 
 
    if (checkElement != null && checkDisabled) { 
 
    checkElement.value = "-NO VENUE-"; 
 
    } 
 
}

<!--main.html--> 
 

 
<div class="row"> 
 
    <div class="3u 12u$(medium)"> 
 
    <div class="select-wrapper"> 
 
     <select> 
 
     <option value="">-Select Programme-</option> 
 
     <option value="1">Yogalates</option> 
 
     <option value="2">Pilates</option> 
 
     <option value="3">Kick Boxing</option> 
 
     <option value="4">K-Pop Dance</option> 
 
     <option value="5">Hip Hop</option> 
 
     <option value="6">Jazz Aerobics</option> 
 
     <option value="7">Zumba</option> 
 
     <option value="8">Fitball</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <p>OR</p> 
 
    <div class="3u 12u$(medium)"> 
 
    <div class="12u$"> 
 
     <input type="text" value="" placeholder="Customize your own programme" /> 
 
    </div> 
 
    </div> 
 
    <div class="2u 12u$(medium)"> 
 
    <div class="12u$"> 
 
     <input id="venueTB" type="text" value="" placeholder="Venue" /> 
 
    </div> 
 
    </div> 
 
    <div class="2u 12u$(medium)"> 
 
    <input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()"> 
 
    <label for="venueChk">No Venue</label> 
 
    </div> 
 
</div> 
 
<div id="newProg"></div> 
 
<div class="row"> 
 
    <div class="2u 12u$(medium)"> 
 
    <a class="button" onclick="addMore()"> 
 
     <div style="font-size: 35px">+</div> 
 
    </a> 
 
    <a class="button" style="margin:0 0 0 1em" onclick="removeProg()"> 
 
     <div style="font-size: 35px">-</div> 
 
    </a> 
 
    </div> 
 
</div>

actual outcome

expected outcome

Answer 1

ですDOMはid="venueTB"です。 すべてのチェックボックスにクラスを追加してみてください、とcheckBox()機能で、

document.querySelectorAll('.class-name') 

---

もう一つを呼び出すことによって、それらを得る、私はそれがあるべきだと思う：

var checkDisabled = checkElement.disabled == true; 

の代わり：

var checkDisabled = checkElement.disabled = true; 

Answer 2

IDは一意である必要があります。

<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox()"> 

へ：

あなたが通過します。このように

<input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)"> 

：

• イベントオブジェクト
• この：現在のあなたはインラインJSの機能を持っているので、あなたがから変更することができますDOMオブジェクト

このように、あなたの機能が使用できます

function checkBox(e, obj) { 
    var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0]; 
    var checkDisabled = checkElement.disabled = true; 
    if (checkElement != null && checkDisabled) { 
     checkElement.value = "-NO VENUE-"; 
    } 
} 

スニペット：

var counter = 0; 
 

 
function addMore() { 
 
    counter++; 
 
    var objNewDiv = document.createElement('div'); 
 
    objNewDiv.setAttribute('id', 'addProg' + counter); 
 
    objNewDiv.innerHTML = '<div class="row"> <div class="3u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div>' + '<p class="12u$(xsmall)">OR</p>' + '<div class="3u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div>' + '<div class="2u 12u$(medium)"> <div class="12u$"> <input id="venueTB' + counter + '" type="text" value="" placeholder="Venue" /> </div> </div>' + '<div class="2u 12u$(medium)"> <input type="checkbox" id="venueChk' + counter + '"name="venueChk" onclick="checkBox(event, this)"> <label for="venueChk' + counter + '" >No Venue</label> </div>'; 
 
    document.getElementById('newProg').appendChild(objNewDiv); 
 
} 
 

 
function removeProg() { 
 
    if (0 < counter) { 
 
    document.getElementById('newProg').removeChild(document.getElementById('addProg' + counter)); 
 
    counter--; 
 
    } else { 
 
    alert("No boxes to remove"); 
 
    } 
 
} 
 

 
function checkBox(e, obj) { 
 
    var checkElement = obj.parentNode.previousElementSibling.querySelectorAll('input')[0]; 
 
    if (obj.checked) { 
 
    checkElement.disabled = true; 
 
    checkElement.value = '-NO VENUE-'; 
 
    } else { 
 
    checkElement.disabled = false; 
 
    checkElement.value = ''; 
 
    } 
 
}

<div class="row"> 
 
    <div class="3u 12u$(medium)"> 
 
     <div class="select-wrapper"> 
 
      <select> 
 
       <option value="">-Select Programme-</option> 
 
       <option value="1">Yogalates</option> 
 
       <option value="2">Pilates</option> 
 
       <option value="3">Kick Boxing</option> 
 
       <option value="4">K-Pop Dance</option> 
 
       <option value="5">Hip Hop</option> 
 
       <option value="6">Jazz Aerobics</option> 
 
       <option value="7">Zumba</option> 
 
       <option value="8">Fitball</option> 
 
      </select> 
 
     </div> 
 
    </div> 
 
    <p>OR</p> 
 
    <div class="3u 12u$(medium)"> 
 
     <div class="12u$"> 
 
      <input type="text" value="" placeholder="Customize your own programme" /> 
 
     </div> 
 
    </div> 
 
    <div class="2u 12u$(medium)"> 
 
     <div class="12u$"> 
 
      <input id="venueTB" type="text" value="" placeholder="Venue" /> 
 
     </div> 
 
    </div> 
 
    <div class="2u 12u$(medium)"> 
 
     <input type="checkbox" id="venueChk" name="venueChk" onclick="checkBox(event, this)"> 
 
     <label for="venueChk">No Venue</label> 
 
    </div> 
 
</div> 
 
<div id="newProg"></div> 
 
<div class="row"> 
 
    <div class="2u 12u$(medium)"> 
 
     <a class="button" onclick="addMore()"> 
 
      <div style="font-size: 35px">+</div> 
 
     </a> 
 
     <a class="button" style="margin:0 0 0 1em" onclick="removeProg()"> 
 
      <div style="font-size: 35px">-</div> 
 
     </a> 
 
    </div> 
 
</div>