通过 Javascript CheckBox 验证文本框

Posted 2023-05-09

【中文标题】通过 Javascript CheckBox 验证文本框

【英文标题】：Validate a Textbox through a 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 验证都很容易绕过！

【参考方案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>

希望这会对你有所帮助。