注意：

Question

我有两个复选框＆＃34;已过时＆＃34;和＆＃34;待定＆＃34;。如果用户单击两个复选框之一，则应禁用另一个复选框。如果用户取消选中一个复选框，则两个复选框都应该是可选的。

＆＃13;

$(document).ready(function(){
      $("input.obsolete").click(toggle_checkbox());
      $("input.pending").click(toggle_checkbox());
    });
    
    function toggle_checkbox() {
      if($('input.obsolete').checked) {
        $("input.pending").attr("disabled", true);
      } else {
        $("input.pending").removeAttr("disabled");
      };
    
      if($('input.pending').checked) {
        $("input.obsolete").attr("disabled", true);
      }  else {
        $("input.obsolete").removeAttr("disabled");
      };
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
      obsolete
      <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
      pending 
    </div>

＆＃13;

但我仍然可以点击两个复选框。我错过了什么？

Answer 1

下面：

$(document).ready(function(){
  $('input:checkbox').click(function(){
    $(this).siblings('input:checkbox').prop('disabled', $(this).is(':checked'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
  obsolete
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
  pending 
</div>

Answer 2

＆＃13;

$(document).ready(function(){
      $("input.obsolete").click(toggle_checkbox);
      $("input.pending").click(toggle_checkbox);
    });
    
    function toggle_checkbox() {
      if($('input.obsolete').prop('checked')) {
        $("input.pending").attr("disabled", true);
      } else {
        $("input.pending").removeAttr("disabled");
      };
    
      if($('input.pending').prop('checked')) {
        $("input.obsolete").attr("disabled", true);
      }  else {
        $("input.obsolete").removeAttr("disabled");
      };
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent" class="obsolete"> 
      obsolete
      <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent" class="pending"> 
      pending 
    </div>

＆＃13;

要将代码更改为有效，请更改如下。

将类名添加到如下所示的复选框

<input type="checkbox" value="1" name="job[invoice_sent]"
 id="job_invoice_sent" class="obsolete"> obsolete 

<input type="checkbox" value="1" name="job[invoice_sent]"
 id="job_invoice_sent" class="pending">pending

更改一些代码。

发件人

$（＆＃34; input.obsolete＆＃34）。单击（toggle_checkbox（））;

$（＆＃34; input.pending＆＃34）。单击（toggle_checkbox（））;

以


$（＆＃34; input.obsolete＆＃34）。单击（toggle_checkbox）;

$（＆＃34; input.pending＆＃34）点击（toggle_checkbox）;

如果声明如下


if（$（＆＃39; input.obsolete＆＃39;）。prop（＆＃39; checked＆＃39;））{

//一些代码

}

~~~~~~~~~~


但我建议您使用＆＃34; RADIO＆＃34;不是因为这个原因而出现的复杂文字!!

Answer 3

jQuery中没有$('input.pending').checked，而是使用$('input.pending').is(":checked")

＆＃13;

$(document).ready(function(){
  $("input.obsolete").click(toggle_checkbox);
  $("input.pending").click(toggle_checkbox);
});

function toggle_checkbox() {
    $("input.pending").attr("disabled", $('input.obsolete').is(":checked"));

    $("input.obsolete").attr("disabled", $('input.pending').is(":checked"));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" class="obsolete" id="job_invoice_sent"> 
  obsolete
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" value="1" name="job[invoice_sent]" class="pending" id="job_invoice_sent"> 
  pending 
</div>

＆＃13;

Answer 4

您可以简化代码并为所有input:checkbox元素分配事件处理程序，而不是单独制作。

这是一个使用jQueries not()函数的简单代码：

＆＃13;

$(document).ready(function(){
  $('input:checkbox').on('change', function() {
      $('input:checkbox').not(this).prop('checked', false);  
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input name="job[invoice_sent]" type="hidden" value="0">
      <input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
      obsolete
      <input name="job[invoice_sent]" type="hidden" value="0">
      <input type="checkbox" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
      pending 
    </div>

＆＃13;

注意：

在您的情况下，使用radio - 输入而不是处理复选框会更容易。只需指定所有radio - 输入相同的name属性，即可获得所需的行为

DEMO：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
      <input name="job[invoice_sent]" type="hidden" value="0">
      <input type="radio" value="pending" name="example">pending
      <input name="job[invoice_sent]" type="hidden" value="0">
      <input type="radio" value="obsolete" name="example">obsolete
</form>

＆＃13;

Answer 5

首先，您需要在所有复选框输入类型中添加一个className并使用以下概念来实现

＆＃13;

$('input[class^="class"]').click(function() {
    var $this = $(this);
   if ($this.is(".className")) {
        if ($this.is(":checked")) {
           
            $(".className").not($this).prop({ disabled: true, checked: false });
        } 
        else{
        
            $(".className").not($this).prop({ disabled: false, checked: false });
        
        }
        }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" class="className" value="1" name="abcd" id="job_invoice_sent"> 
  obsolete
  <input name="job[invoice_sent]" type="hidden" value="0"><input type="checkbox" class="className" value="1" name="job[invoice_sent]" id="job_invoice_sent"> 
  pending 
</div>

＆＃13;

如果用户单击一个复选框，则jquery切换其他复选框

5 个答案:

注意：

DEMO：