如果您的复选框被单击，如何制作一个 if..else 语句将返回 true？

Question

我最近遇到了这个 if else 语句的问题

所以两者都有一个特定的 id 名称，即“premium”和“regular”

我想用 jquery 做一个 if else 语句，它可以返回我的输入

这是我的复选框需要做的，

• 如果我的复选框被选中，我希望启用输入
• 否则什么都不会发生，因为它已被禁用。

$("#PreCap").prop('disabled', true);
$("#PreA").prop('disabled', true);

$("#RegCap").prop('disabled', true);
$("#RegA").prop('disabled', true);


//var premium = document.querySelector("#premium").checked;
// var regular = document.getElementById("regular");

$('#premium').val();

if ($("#premium").is(":checked")) {
  $("#PreCap").prop('disabled', false);
  $("#PreA").prop('disabled', false);
} else if (regular.checked === true) {
  document.getElementById("RegCap").disabled = false;
  document.getElementById("RegA").disabled = false;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="form-check-input" id="premium">
<label class="form-check-label" type="checkbox" for="premium">Premium Air Conditioner</label>
<input type="number" id="PreCap" class="form-control" placeholder="Seat Capacity">

<input type="checkbox" class="form-check-input" id="regular">
<label class="form-check-label" type="checkbox" for="regular">Regular Air conditioner</label>
<input type="number" id="RegCap" class="form-control" placeholder="Seat Capacity">

注意：我正在使用 bootstrap 5 和 jquery-3.5.1.min.js

Answer 1

看看这个

我为机器人复选框添加了一个名为air的类

点击其中一个，我将禁用设置为不检查

我还在加载时调用更改事件，因此输入字段设置为加载时复选框的任何内容

你可以根据需要添加 RegA 和 PreA

$(function() { // on page load
  $(".air").on("change", function() {
    $("#PreCap").prop('disabled', !$("#premium").is(":checked"));
    $("#RegCap").prop('disabled', !$("#regular").is(":checked"));
  }).change(); // when page loads, trigger the event
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="form-check-input air" id="premium">
<label class="form-check-label" for="premium">Premium Air Conditioner</label>
<input type="number" id="PreCap" class="form-control" placeholder="Seat Capacity">

<input type="checkbox" class="form-check-input air" id="regular">
<label class="form-check-label" for="regular">Regular Air conditioner</label>
<input type="number" id="RegCap" class="form-control" placeholder="Seat Capacity">

Answer 2

你可以试试这个：

  $('#premium').click(function(){
 
    $("#PreCap").prop('disabled', !$(this).is(":checked"));
 
        
});

$('#regular').click(function(){
    $("#RegCap").prop('disabled', !$(this).is(":checked"));
        
});