मेरे पास दो चेकबॉक्स "अप्रचलित" और "लंबित" हैं। यदि कोई उपयोगकर्ता दो चेकबॉक्स में से एक पर क्लिक करता है, तो दूसरा चेकबॉक्स अक्षम होना चाहिए। यदि उपयोगकर्ता एक चेकबॉक्स को अचयनित करता है तो दोनों चेकबॉक्स चयन योग्य होने चाहिए।

$(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");
      };
    }
<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>

लेकिन मैं अभी भी दोनों चेकबॉक्स पर क्लिक कर सकता हूं। मुझे किसकी याद आ रही है?

1
Trinity76 3 अप्रैल 2018, 15:48

2 जवाब

सबसे पहले आपको अपने सभी चेकबॉक्स इनपुट प्रकार में एक className जोड़ना होगा और लागू करने के लिए नीचे दी गई अवधारणा का उपयोग करना होगा

$('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 });
        
        }
        }
});

 
<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>
0
SantoshK 3 अप्रैल 2018, 13:19

JQuery में $('input.pending').checked कुछ भी नहीं है, इसके बजाय $('input.pending').is(":checked") का उपयोग करें

$(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"));
}
<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>
0
yajiv 3 अप्रैल 2018, 12:58