通过 Javascript CheckBox 验证文本框答案

【问题标题】：Validate a Textbox through a Javascript CheckBox通过 Javascript CheckBox 验证文本框
【发布时间】：2018-07-02 22:31:38
【问题描述】：

我正在尝试通过 CheckBox 验证 TextBox ...想法如下，当用户取消选中 CheckBox (false) 时，该字段不是强制性的，但是当他标记 CheckBox (true) 时，他必须输入文本，如果他不这样做，我必须在屏幕上给他发消息...我不知道该怎么做...对我有什么帮助吗？

查看：

<script type="text/javascript">
        $(function (){
            $("#idcheckproveedor").change(function(){
                var st = this.checked;
                if (st) {
                    $("#txtSearch").prop("disabled", false);
                }
                else {
                    $("#txtSearch").prop("disabled", true);
                }
                });
            });

    </script>

     <div class="form-group">
                        <label>Proveedor</label>
                        <input type="checkbox" name="checkproveedor" id="idcheckproveedor" checked="checked" value="true"/>
                        @Html.TextBox("searchTerm", null, new { @class = "form-control", id = "txtSearch" })
                   </div>

【问题讨论】：

别忘了验证服务器端的信息！因为任何 JS 验证都很容易绕过！

标签： javascript jquery validation checkbox textbox

【解决方案1】：

试试下面的方法：

$(function (){
  var st = $("#idcheckproveedor").attr('checked');
  $("#idcheckproveedor").change(function(){
    st = this.checked;
    if (st) {
        $("#txtSearch").prop("disabled", false);
    }
    else {
        $("#txtSearch").prop("disabled", true);
    }
    });
    $("#mybtn").click(function(){
      if(st && ($("#txtSearch").val() == "" || $("#txtSearch").val() == null)){
        alert("Please enter text");
        return false;
      }
    });
});

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


<div class="form-group">
  <label>Proveedor</label>
  <input type="checkbox" name="checkproveedor" id="idcheckproveedor" checked="checked" value="true"/>
  <input type="text" id="txtSearch"/>
</div>
<button id="mybtn">Click</button>

【讨论】：

【解决方案2】：

$( document ).ready(function() {
    $('body').on('click','.btn-submit',function(){
    
      var checked = $('#checked_indicator').is(':checked');
      var validate = true;
      var field = $('#field_only').val();
    
      if(checked){
          if(field == ''){
            validate =false;
          }
      }
      
      if(validate){
       //code here for field is not required
          alert('Your field: '+field);
          
      }else{
         
          //code here for field is required
          alert('Field is Required');
      }
    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_test">
  <input type="checkbox" id="checked_indicator"  />
  <input type="field" id="field_only" />
  <button type="button" class="btn-submit" >Submit</button>
</form>

希望这会对你有所帮助。

【讨论】：