Question

我正试图找出解决这个问题的方法：

我想有一个函数来检查文本字段是否填充了文本并选中了复选框。满足这些条件时，启用“提交”按钮。如果在“提交”按钮启用后不久，用户清除文本字段或取消选中复选框，则应再次禁用“提交”按钮。

我的代码：

  <%= f.text_field :humanizer_answer ,:class=> "form-control",:required => true, :id=>"answer_humanizer_profile"%>
  <%= f.check_box :not_a_robot, :id=>"vbbbb",:required => true,:type=> "input" %> 

     <%= button_to t('confirm'), registration_path(@user), data: { confirm: t('confirm_big') }, method: :delete, :class=>"blue-button btn btn-default",  :disabled =>:true,:id=>"hid-button" %>

此刻我尝试了这个功能：

$("#vbbbb").change(function() {
    $value = $("#answer_humanizer_profile").val();

    if(this.checked && $value > 0) {
         $('#hid-button').prop('disabled', false);
    } else {
         $('#hid-button').prop('disabled', true);
    }
});

这个功能可以做我需要的一点但不是100％的。

Answer 1

每次在输入字段中输入或更改某些内容或更改复选框时，都会触发检查功能。评估禁用或启用提交按钮的条件。请参阅下面代码运行器中的注释示例：

//cache dom elements into variables for performance
var textBox = $("#myTextBox");
var checkBox = $('#myCheckBox');
var submitButton = $("#mySubmitButton");

//trigger checking if anything changes in textbox or checkox
textBox.bind("keyup change", checker);
checkBox.change(checker);

//checker that evaluates conditions to disable or enable button
function checker() {
  var cond1 = checkBox.is(":checked");
  var cond2 = (textBox.val().length > 0);
  if (cond1 && cond2) {
    submitButton.prop('disabled', false);
  } else {
    submitButton.prop('disabled', true);
  }
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <form>
    <input type="text" id="myTextBox">
    <input type="checkbox" name="vehicle" value="Bike" id="myCheckBox">I have a foobar
    <br>
    <button type="submit" id="mySubmitButton" disabled>SUBMIT</button>
  </form>
</body>

</html>

满足2个条件时启用按钮

1 个答案: