0

我正在使用 jQuery 在单选框上显示/隐藏 div。这很好用，但我不想扩展它，所以在页面加载时默认选择特定的收音机。

这是 HTML

<input type="radio" id="Payment1">Payment1
<input type="radio" id="Payment2">Payment2

<div id="PaymentContainer1" style="display:none;">Payment 1 container</div>
<div id="PaymentContainer2" style="display:none;">Payment 2 container</div>

jQuery

$(document).change(function () {
    if ($('#Payment1').prop('checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').prop('checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
});

这是小提琴http://jsfiddle.net/teva/yauCs/1/

我尝试添加

$("#Payment1").prop("checked", true);

但它不起作用。

谢谢

编辑 有什么方法可以使特定 div 中的字段不仅隐藏，而且禁用？我对所有 div 使用一种表单，当我用 jQuery 隐藏它们时，表单不会发布，因为字段是空的。因此，隐藏 div 并禁用输入。jQuery可以做到这一点吗？肿瘤坏死因子

4

5 回答 5

1

尝试以下：

  $("input[type=radio]").change(function () {

   if ($('#Payment1').prop('checked')) {
      $('#PaymentContainer1').show();
  } else {
      $('#PaymentContainer1').hide();
   }

   if ($('#Payment2').prop('checked')) {
      $('#PaymentContainer2').show();
   } else {
      $('#PaymentContainer2').hide();
  }
});

$("#Payment2").prop("checked", true).trigger("change");

这是链接：http: //jsfiddle.net/yauCs/5/

于 2013-08-07T10:27:12.033 回答
0

伙计，你为什么在文档上使用 .change 事件，当你在页面中进行一些其他更改时，它可能会出错。

像这样更好地使用

$(document).ready(function () {

    $('input[type=radio]').change(function(){


    if ($('#Payment1').is(':checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').is(':checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
        });
});
$("#Payment1").prop("checked", true).change();

小提琴演示

您还有其他问题，在您的情况下，两个收音机都被选中，理想情况下不是这样。

$(document).ready(function () {
    $('input[type=radio]').change(function(){

    if ($('#Payment1').is(':checked')) {

        $('.containner').hide();
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').is(':checked')) {

        $('.containner').hide();
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
        });
});
$("#Payment1").prop("checked", true).change();

完美电台演示

于 2013-08-07T10:33:11.513 回答
0

这段代码中的错误很少，试试这个我希望这能很好地工作 $(document).ready(function(){ $("#Payment1").attr("checked", true);

if ($('#Payment1').prop('checked')) {
    $('#PaymentContainer1').show();
} else {
    $('#PaymentContainer1').hide();
}

if ($('#Payment2').prop('checked')) {
    $('#PaymentContainer2').show();
} else {
    $('#PaymentContainer2').hide();
}

});

于 2013-08-07T10:33:43.187 回答
0

name="payment"将两者都添加，radio以便它们充当组并在处理程序click之后调用change

HTML

<input type="radio" name="payment" id="Payment1">Payment1
<input type="radio" name="payment" id="Payment2">Payment2
<div id="PaymentContainer1" style="display:none;">Payment 1 container</div>
<div id="PaymentContainer2" style="display:none;">Payment 2 container</div>

JS

$(document).change(function () {
    if ($('#Payment1').prop('checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').prop('checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
});
$("#Payment1").click();

jsFiddle

于 2013-08-07T10:25:36.333 回答
0

避免使用$(document).change()，因为您将监听 DOM 中每个元素的事件，on()允许动态添加元素并且仍然可以工作。

$(document).on('change','input',function () {

    if ($('#Payment1').prop('checked')) {
        $('#PaymentContainer1').show();
    } else {
        $('#PaymentContainer1').hide();
    }

    if ($('#Payment2').prop('checked')) {
        $('#PaymentContainer2').show();
    } else {
        $('#PaymentContainer2').hide();
    }
});

$("#Payment1").prop("checked", true);

还将您的收音机名称设置为相同的名称，以确保只选择一个

小提琴

于 2013-08-07T10:31:52.507 回答