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

Posted 2023-05-08

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

【英文标题】：How to make an if..else statement that will return true if your checkbox is being clicked?

【发布时间】：2021-06-20 04:01:00

【问题描述】：

我最近遇到了这个 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

【问题讨论】：

我没有看到$("#premium") 的点击/更改事件。如果您没有该事件，则不会发生太多事情

正在被检查 - 正在被打勾吗？那么你肯定需要一个活动。除了在事件中没有“被检查”其他 - 在事件之外它已经被勾选或尚未被勾选，没有“正在处理”（[being]）

您在下面有一个答案，但请查看 jQuery API 文档以获取 :checked Selector

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

【参考方案2】：

你可以试试这个：

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

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

【讨论】：

if($(this).prop("checked") == true) 像这样更干净：if($(this).is(":checked")) 或只是if (this.checked)，为什么要混合使用 jQuery 和 DOM？如果你必须混合，请使用 document.getElementById("RegCap").disabled = !this.checked 而不是使用 if 和 else - jQuery: $("#PreCap").prop('disabled',!this.checked)

现在看起来不错。感谢您让它变得更简单。

现在看起来几乎像我的了