Javascript 未选中复选框并显示div

我有两个输入复选框

<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未选中，也仅显示div 1 单击checkbox2时，选中checkbox1，然后单击div 2 show和div 1 hide， 实际上，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>

$j（文档）.ready（函数（）{
$j（“#checkbox1”）.change（函数（）{
如果（选中此项）{
$j（“#checkbox2”）.prop（“禁用”，false）；
}
否则{
$j（“#复选框2”）.prop（“已禁用”，真）；
}
});
});

这是一份工作清单。将您的JS更新为

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

您可以使用下面的代码

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

$j（文档）.ready（函数（）{
$j（“输入[type='checkbox']”）。更改（函数（）{
var index=$j（this.attr（'id'）。replace（'checkbox'，''）；
var指数=2；
如果（索引==2）
第二指数=1；
if（this.is（':checked'））
{
$j（'..+index）.show（）；//显示与选中复选框相关的div
$j（'.+secondIndex）.hide（）；//隐藏其他div
$j（“#复选框”+secondIndex）.attr（'disabled'，true）；//禁用其他复选框
}
其他的
{
//如果复选框未选中
$j（'.+index）.hide（）；//隐藏div 1
$j（'.+secondIndex）.hide（）；//hide div 2
$j（“#复选框”+secondIndex）.attr（'disabled'，false）；//启用其他复选框
} 
});
});

也许你想要这样

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

---

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

html:

演示：

希望有帮助。

你可以试试这个

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

           });

---

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

为什么不使用收音机而不是复选框..我建议您在两个复选框中使用相同的名称..我认为

如果（this.is（':checked））

必须是

如果（this.is（':checked'））

对不起，我修改了默认条件@ishank gupta

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

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

           });