フォームに複数のチェックボックスがあると、HTMLチェックボックスのチェックが中断されます

Question

無効なチェックボックスを無視するには、以下のフォームを使用します。フォームの予想される動作は、ユーザーが[モデル]チェックボックスをチェックせずに[送信]ボタンをクリックすると、フォームを送信する必要があることです。 [モデル]チェックボックスがオンの場合、ユーザーはデータを入力する必要があります。この動作は、ページに他のチェックボックスがない限り有効です。別のチェックボックスがあり、[モデル]チェックボックスをチェックせずに[送信]ボタンをクリックすると、警告がスローされます。どのようにしてフォーム内の他のチェックボックスを無視して、目的の動作を達成できますか？ありがとう！

$(document).ready(function() { 
 
    $('#checkModelBtn').click(function() { 
 
     var isCheckboxChecked = $("input[type=checkbox]:checked").length; 
 
     var isTextEntered = $("input.childModel").val().length; 
 
     
 
     if (isTextEntered || !isCheckboxChecked) { 
 
      //alert("validation passed!"); 
 
     } else { 
 
      alert("Please enter the Model Number"); 
 
     } 
 

 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<table> 
 
<tr> 
 
<td> 
 
<p><h2>MODEL:</h2></p> 
 
<input type="checkbox"> Model # 
 
<input type="text" size="12" class="childModel"><BR> 
 
</td> 
 

 
<td> 
 
THIS CHECKBOX BREAKS THE FUNCTIONALITY<p> 
 
<input type="checkbox" checked disabled> Some text here</td> 
 
</tr> 
 
</table> 
 

 
<hr> 
 
<input type="submit" name="submit" value="submit" id="checkModelBtn"/>

Answer 1

あなたがあなたの検証でそれを無視する方法が必要検証したくないチェックボックスを無視すると、あなたが入力フィールドを使用していることを行うことができます。チェックボックスが独自のセレクターを持っている必要があります

$(document).ready(function() { 
 
    $('#checkModelBtn').click(function() { 
 
    var isCheckboxChecked = $(".childModel").prev("input[type=checkbox]:checked").length; 
 
    var isTextEntered = $("input.childModel").val().length; 
 

 
    if (isTextEntered || !isCheckboxChecked) { 
 
     //alert("validation passed!"); 
 
    } else { 
 
     alert("Please enter the Model Number"); 
 
    } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <p> 
 
     <h2>MODEL:</h2> 
 
     </p> 
 
     <input type="checkbox"> Model # 
 
     <input type="text" size="12" class="childModel"> 
 
     <BR> 
 
    </td> 
 

 
    <td> 
 
     THIS CHECKBOX BREAKS THE FUNCTIONALITY 
 
     <p> 
 
     <input type="checkbox" checked disabled> Some text here</td> 
 
    </tr> 
 
</table> 
 

 
<hr> 
 
<input type="submit" name="submit" value="submit" id="checkModelBtn" />

Answer 2

：例

$(".childModel").prev("input[type=checkbox]:checked")

に $("input[type=checkbox]:checked")からあなたのチェックボックスのためのセレクタを変更します。

$(document).ready(function() { 
 
    $('#checkModelBtn').click(function() { 
 
     var isCheckboxChecked = $("input[name='model_number']:checked").length; 
 
     var isTextEntered = $("input.childModel").val().length; 
 
     
 
     if (isTextEntered || !isCheckboxChecked) { 
 
      //alert("validation passed!"); 
 
     } else { 
 
      alert("Please enter the Model Number"); 
 
     } 
 

 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<table> 
 
<tr> 
 
<td> 
 
<p><h2>MODEL:</h2></p> 
 
<input type="checkbox" name="model_number"> Model # 
 
<input type="text" size="12" class="childModel"><BR> 
 
</td> 
 

 
<td> 
 
THIS CHECKBOX BREAKS THE FUNCTIONALITY<p> 
 
<input type="checkbox" checked disabled> Some text here</td> 
 
</tr> 
 
</table> 
 

 
<hr> 
 
<input type="submit" name="submit" value="submit" id="checkModelBtn"/>