CODEWITHSUNDEEP
javascriptjquerycheckbox
user3558854
user3558854

Reputation: 25

Checkbox unchecked and div show

I have 2 input checkboxes

<input type="checkbox" id="checkbox1"  name="A" value="A" checked>
<input type="checkbox" id="checkbox2"  name="B" value="B" checked="no">

and 2 divs

<div class="1">
   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
 </div>   
<div class="2">
   <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
 </div>

The default will be checkbox 2 unchecked when checkbox 1 clicked, also only div 1 show and checkbox1 unchecked when checkbox2 clicked, then div 2 show and div 1 hide, actualy what js code is proper with this issue, as i've tried it but it didn't work.

<script>
$j(document).ready(function(){
   $j("#checkbox1").change(function() {
    if (this.checked) {
        $j("#checkbox2").prop("disabled", false);        
    }
    else {
        $j("#checkbox2").prop("disabled", true);       
    }
   });
});
</script>

Upvotes: 2

Views: 468

Answers (5)

Manish Kumar
Manish Kumar

Reputation: 125

You can try this 

$(document).ready(function () {

               $('#checkbox1').prop("checked", true);
               //  $('#checkbox2').attr('disabled', true);
               $('.2').hide();
               $('#checkbox1').click(function () {
                   $('.2').hide();
                   $('.1').show();
                   $('#checkbox2').prop("checked", false);
                    $('#checkbox1').attr('disabled', true);
                     $('#checkbox2').attr('disabled', false);
               });
               $('#checkbox2').click(function () {
                   $('.1').hide();
                    $('.2').show();
                   $('#checkbox1').prop("checked", false);
                    $('#checkbox2').attr('disabled', true);
                     $('#checkbox1').attr('disabled', false);
               });

           });

It will give the result as you specified above.

Upvotes: 0

user3462803
user3462803

Reputation: 170

You don't want the user to select the checkboxes simultaneously? If that is what you want, hope this code helps.

html:

<input type="checkbox" id="checkbox1" name="A" value="A" checked>
<input type="checkbox" id="checkbox2" name="B" value="B" disabled>
<div class="1" style="display:none">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="2" style="display:none">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

script: 

 $(document).ready(function () {
        $('.1').css('display', 'block');
        $("#checkbox1").change(function () {

            if (this.checked) {
                $('.1').css('display', 'block');
                $('#checkbox2').attr("disabled", true);
            } else {
                $('.1').css('display', 'none');
                $('#checkbox2').attr("disabled", false);
            }
        });
        $("#checkbox2").change(function () {

            if (this.checked) {
                $('.2').css('display', 'block');
                $('#checkbox1').attr("disabled", true);
            } else {
                $('.2').css('display', 'none');
                $('#checkbox1').attr("disabled", false);
            }
        });
    });

Demo: Fiddle

Hope it helps.

Upvotes: 0

Viscocent
Viscocent

Reputation: 2064

maybe you want it like this.

$(document).ready(function(){
$("#checkbox1").change(function() {
    if (this.checked) {
        $("#checkbox2").prop("disabled", true);        
    }
    else {
        $("#checkbox2").prop("disabled", false);       
    }
});

$("#checkbox2").change(function() {
    if (this.checked) {
        $("#checkbox1").prop("disabled", true);        
    }
    else {
        $("#checkbox1").prop("disabled", false);       
    }
});
});

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use below code

<script>
$j(document).ready(function(){
   $j("input[type='checkbox']").change(function() {
     var index = $j(this).attr('id').replace('checkbox','');
     var secondIndex = 2;          
     if(index == 2)
         secondIndex = 1;

     if(this.is(':checked'))
     {
       $j('.'+index).show();// show div related to checked checkbox

       $j('.'+secondIndex).hide(); // hide other div
       $j('#checkbox'+secondIndex).attr('disabled',true); // disable other checkbox          
     }
     else
    {
      // if checkbox unchecked
      $j('.'+index).hide();//hide div 1
      $j('.'+secondIndex).hide(); //hide div 2
      $j('#checkbox'+secondIndex).attr('disabled',false); // enable other checkbox
     } 
   });
});
</script>

Upvotes: 0

Ishank Gupta
Ishank Gupta

Reputation: 1593

Here is a working fiddle. Update your JS to

$(document).ready(function(){
 $("#checkbox1").click(function() {
   $("#checkbox2").attr("disabled", this.checked);
 });
});

Upvotes: 1

Related Questions