如果您的复选框被点击，如何生成一个if..else语句返回true？

Question

我最近对if else语句有一个问题

因此两者都有一个特定的id名称，即“Premium”和“Regular”。

我想使用jquery生成一个if else语句，该语句将返回我输入的

下面是我的复选框需要做的,

• 如果选中了我的复选框，我希望启用输入
• 否则不会发生任何情况，因为它已被禁用。

null

$("#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">

null

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

Answer 1

您可以尝试以下操作：

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

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

Answer 2

看看这个

我为bot复选框添加了一个名为Air的类

单击任一项时，我将“禁用”设置为“不选中”

另外，我在加载时调用change事件，因此输入字段被设置为加载时的任何chekbox

如果需要的话，你可以添加RegA和PreA

null

$(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">