チェックボックスをオフにして、私はこのようになりますHTML持って検証

Question

を削除する方法：これは、カレンダー、3つのラジオボタンやチェックボックスを作成します

<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つのラジオボタンを1つに見なす必要があります。一緒に入力する必要があります。また、検証によって次のステップに進むことはできません。 唯一の例外は、チェックボックスがオンの場合です。これは、カレンダーとラジオボタンを無効にします（そして、それらのバリデーションを削除します）。もう一度チェックボックスをオフにすると、カレンダーとラジオボタンが再度必要になります。

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