取消选中复选框并显示d​​iv

Question

我有2个输入复选框

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

和2格

<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>  

默认值是单击复选框1时未选中复选框2，也仅单击div1时仅显示了div 1而未选中复选框1，然后显示了div 2并隐藏了div 1，实际上，什么js代码适用于此问题，我已经尝试过，但是它没有用。

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

Answer 1

这是工作中的小提琴 。 将您的JS更新为

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

Answer 2

您可以使用以下代码

<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>

Answer 3

也许您想要这样。

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

Answer 4

您不希望用户同时选择复选框吗？ 如果这是您想要的，希望这段代码对您有所帮助。

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>

脚本：

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

演示： 小提琴

希望能帮助到你。

Answer 5

你可以试试这个

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

           });

它将给出您上面指定的结果。