Question

我有2个输入复选框

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

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

单击复选框1时，默认将取消选中复选框2，也只显示div 1 当checkbox2单击时，复选框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

这是一个有效的fiddle。将您的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);
            }
        });
    });

演示： Fiddle

希望它有所帮助。

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

           });

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

复选框未选中并显示div

5 个答案: