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

Question

我想在选中附加文本框的复选框时禁用文本框。选中复选框后，将禁用硬编码文本框。 运行代码段以查看结果或查看下面显示的屏幕截图。

以下是main.js和main.html文件

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

actual outcome

expected outcome