How to uncheck checkboxes and remove validation

Question

I have HTML that looks like this:

<div class="form-group">
                    <div class="input-group">
                        <label for="daterange-vacancy" class="input-group-addon">Van</label>
                        <input type="text" id="daterange-vacancy" class="form-control" name="daterange-vacancy" placeholder="dd/mm/yyyy" data-class="daterangepicker" required="required" />
                        <label for="daterange-vacancy" class="input-group-addon">
                            <span class="fa fa-calendar"></span>
                        </label>
                    </div>
                </div>
    <div class="form-group">
                        <input class="custom-radio" type="radio" id="temp" name="time" value="1" checked="checked" required/><label for="temp" class="bold-sm">Bepaalde dag(en)</label><br/>
                        <input class="custom-radio" type="radio" id="project" name="time" value="2" required/><label for="project" class="bold-sm">Bepaalde periode</label><br/>
                        <input class="custom-radio" type="radio" id="struct" name="time" value="3" required/><label for="struct" class="bold-sm">Terugkerend</label>
                    </div>
                    <div class="form-group">
                        <div class="input-checkbox text-left">
                            <input class="form-checkbox" type="checkbox" id="other" name="other" />
                            <label for="other">Af te spreken</label>
                        </div>
                    </div>

This creates a calendar, 3 radio buttons and a checkbox.

The calendar and 3 radio buttons should be looked at as one, they have to be filled in together or the validation should not let it pass to the next step. The only exception is when the checkbox is checked. This will disable the calendar and the radiobuttons (and remove the validation on them). Upon unchecking the checkbox again, I want the calendar and the radiobuttons to be required again.

My javascript looks like this:

var other = document.getElementById('other');

    if (other) {
        other.onchange = function () {
            document.getElementById('daterange-vacancy').value = "";
            document.getElementById('daterange-vacancy').disabled = this.checked;

            $('input[name=other]').change(function(){
                if($(this).is(':checked')) {
                    $('input[name=time]').attr('checked',false);
                }
            });
        }
    }

The problem is that the radiobuttons do not uncheck when checking the checkbox. And it does not remove the validation on it.

Snowmonkey · Accepted Answer · 2017-12-13 19:36:13Z

1

Here might be a start. And for your own sanity, comment the heck out of your code. It'll help with debugging.

// Create my references
var other = document.getElementById('other');
var vanEl = document.getElementById("daterange-vacancy");
var timeBtnEls = document.getElementsByName("time");

// This will handle the checkbox
if (other) {
  other.addEventListener("click", handleOtherClick)
}

// and this will handle all the radio buttons
for (var i = 0; i<timeBtnEls.length; i++) {
  timeBtnEls[i].addEventListener("click", handleTimeClick);

}


function handleOtherClick(evt){
  // if the box is checked, set the text el to
  //  disabled.
  vanEl.disabled = other.checked;
  // set the check status of all radio els to
  //  the OPPOSITE of the checkbox. End result?
  //  either NO buttons selected (if the check box
  //  is selected), or the LAST radio selected (if
  //  the checkbox is de-selected).
  for (var i = 0; i<timeBtnEls.length; i++){
    timeBtnEls[i].checked = !other.checked;
  }
}

function handleTimeClick(evt){
  // The following line will set the checked
  //  to the OPPOSITE of the currently-clicked
  //  radio button. I could have simply set it to
  //  false, but this also works.
  other.checked = !evt.target.checked;
  
  // and we re-enabled the text box.
  vanEl.disabled = false;
}

<div class="form-group">
  <div class="input-group">
    <label for="daterange-vacancy" class="input-group-addon">Van</label>
    <input type="text" id="daterange-vacancy" class="form-control" name="daterange-vacancy" placeholder="dd/mm/yyyy" data-class="daterangepicker" required="required" />
    <label for="daterange-vacancy" class="input-group-addon">
      <span class="fa fa-calendar"></span>
    </label>
  </div>
</div>
<div class="form-group">
  <input class="custom-radio" type="radio" id="temp" name="time" value="1" checked="checked" required/>
  <label for="temp" class="bold-sm">Bepaalde dag(en)</label>
  <br/>
  <input class="custom-radio" type="radio" id="project" name="time" value="2" required/>
  <label for="project" class="bold-sm">Bepaalde periode</label>
  <br/>
  <input class="custom-radio" type="radio" id="struct" name="time" value="3" required/>
  <label for="struct" class="bold-sm">Terugkerend</label>
</div>
<div class="form-group">
  <div class="input-checkbox text-left">
    <input class="form-checkbox" type="checkbox" id="other" name="other" />
    <label for="other">Af te spreken</label>
  </div>
</div>

answered Dec 13, 2017 at 19:36

Snowmonkey

3,7611 gold badge18 silver badges16 bronze badges

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

4 Comments

Dennis Over a year ago

This did it! Thank you

Snowmonkey Over a year ago

Out of curiousity, why did you choose to create a plain javascript reference to other, and then a jQuery reference to the same thing?

Dennis Over a year ago

I was stuck trying for so long and copy-pasted some code found on SO together and pray... Your solution is much more elegant and works like a charm

Snowmonkey Over a year ago

Excellent. Glad to help.

Collectives™ on Stack Overflow

How to uncheck checkboxes and remove validation

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related