javascript - 如何取消选中复选框并删除验证

Question

我的 HTML 看起来像这样:

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

这会创建一个日历、3 个单选按钮和一个复选框。

日历和 3 个单选按钮应该看成一个，它们必须一起填写，否则验证不应让它通过下一步。唯一的异常(exception)是复选框被选中时。这将禁用日历和单选按钮(并删除对它们的验证)。再次取消选中该复选框后，我希望再次需要日历和单选按钮。

我的 javascript 看起来像这样:

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

问题是单选按钮在选中复选框时不会取消选中。并且它不会删除对其的验证。

Answer 1

这可能是一个开始。为了您自己的理智，对您的代码进行注释。它将有助于调试。

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