选中复选框时如何禁用附加的输入文本框

Question

I want to disable the text box when the checkbox is checked for the appended text box. The hard coded text box is disabled when the checkbox is checked. Run the code snippet to see the outcome or view the screenshots shown below.

Below is the main.js and main.html file

 <!--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

it's because document.getElementById('venueTB') returns the first element in the DOM with id="venueTB" . Try to add classes to all the checkboxes, and get them by calling

document.querySelectorAll('.class-name')

---

Another thing, in checkBox() function, i think it should be:

var checkDisabled = checkElement.disabled == true;

instead of:

var checkDisabled = checkElement.disabled = true;

Answer 2

The IDs must be unique. Because you have inline js functions you can change from:

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

To:

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

In this way you will pass:

• the event object
• this: the current DOM object

In this way your function can be:

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

The snippet:

 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>