复选框未选中并显示 div答案

【问题标题】：Checkbox unchecked and div show复选框未选中并显示 div
【发布时间】：2014-06-26 18:50:32
【问题描述】：

我有 2 个输入复选框

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

和 2 个 div

<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 和 checkbox1 单击 checkbox2 时未选中，然后 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>

【问题讨论】：

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

标签： javascript jquery checkbox

【解决方案1】：

这是一个有效的fiddle。将您的 JS 更新为

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

【讨论】：

抱歉我修改了默认条件@ishank-gupta

【解决方案2】：

你可以试试这个

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

           });

它会给出你上面指定的结果。

【讨论】：

【解决方案3】：

你可以使用下面的代码

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

【讨论】：

我认为if (this.is(':checked))必须是if (this.is(':checked'))

【解决方案4】：

也许你想要这样。

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

【讨论】：

【解决方案5】：

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

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

演示： Fiddle

希望对你有帮助。

【讨论】：