How to disable appended input text box when checkbox is checked javascript

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

Elad Douenias · Accepted Answer · 2016-12-05 15:26:47Z

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;

answered Dec 5, 2016 at 15:26

Elad Douenias

2182 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7146946 Over a year ago

can you show an example on adding classes to the check boxes?

Elad Douenias Over a year ago

gaetanoM · Accepted Answer · 2016-12-05 16:01:38Z

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>

when the check box is unchecked, how do i enable the input text box again?
change your var checkDisabled and if statement to: if(obj.checked) { checkElement.disabled = true; checkElement.value = '-NO VENUE-'; } else { checkElement.disabled = false; checkElement.value = ''; }

Collectives™ on Stack Overflow

How to disable appended input text box when checkbox is checked javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related