Question

我有一个提交按钮，默认情况下是禁用的。现在我有两个单选按钮和一个复选框和提交按钮仅允许当单选按钮的一个已经被检查，以启用和复选框已被选中。

现在，我可以简单地选中复选框并启用提交按钮。

<div>
  <label for="check1">
     <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
     <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
   <input type="checkbox" name="test" value="1">Check
 </div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

和JS：

$('button[type="submit"]').prop("disabled", true);

$('input[name="test"]').on("click", function() {
  $(' button[type="submit"]').prop("disabled", !$('input[name="test"]').prop("checked"));
});

我为此做了一个jsfiddle。

那么，我该如何实现呢？

Answer 1

您可以检查选中的单选按钮的长度：

$('button[type="submit"]').prop("disabled", true);

$('input[name="test"], input[name="radio"]').on("click", function() {
  if($('input[name="radio"]:checked').length){
    $(' button[type="submit"]').prop("disabled", !$('input[name="test"]').prop("checked"));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="check1">
     <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
     <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
   <input type="checkbox" name="test" value="1">Check
 </div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

Answer 2

创建一个通用功能来验证所有复选框和单选按钮。

检查以下示例。

$('button[type="submit"]').prop("disabled", true);

$('#check1, #check2, input[name="test"]').on("change", function() {
  validate();
});

function validate() {
   var valid = true;
   
   if(!$('[name="radio"]:checked').val()) {
      valid = false;
   }
   if(!$('[name="test"]').prop('checked')) {
      valid = false;
   }
   $('button[type="submit"]').prop("disabled", !valid)
}

#terms {
  margin-top: 15px;
}

#btn {
  margin-top: 15px;
  background: red;
  padding: 5px;
  border: 0;
}

#btn::disabled {
  background: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label for="check1">
    <input type="radio" name="radio" id="check1" value="1">Value 1
  </label>
  
    <label for="check2">
    <input type="radio" name="radio" id="check2" value="2">Value 2
  </label>
</div>

<div id="terms">
  <input type="checkbox" name="test" value="1">Check
</div>

<div>
  <button type="submit" id="btn">Send</button>
</div>

Answer 3

在它们两个和if语句中都添加一个onclick：

$('button[type="submit"]').prop("disabled", true);

$('input[name="test"], input[name=radio]').on("click", function() {
  if ($('input[name=radio]:checked').length > 0) {
    $('button[type="submit"]').prop(
      "disabled", !$('input[name="test"]').prop("checked")
    );
  }
});

#terms {
  margin-top: 15px;
}

#btn {
  margin-top: 15px;
  background: red;
  padding: 5px;
  border: 0;
}

#btn::disabled {
  background: lightgrey;
}

<div>
  <label for="check1">
    <input type="radio" name="radio" id="check1">Value 1
  </label>

  <label for="check2">
    <input type="radio" name="radio" id="check2">Value 2
  </label>
</div>

<div id="terms">
  <input type="checkbox" name="test" value="1">Check
</div>

<div>
  <button type="submit" id="btn">Send</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

https://github.com/google/re2/wiki/Syntax

jQuery如何禁用提交按钮，直到选中单选按钮和复选框

3 个答案: