Question

当用户点击某个单选按钮时，我想隐藏我页面的一部分。但除了隐藏区域外，我还要禁用该区域的所有输入。我还希望在用户点击另一个按钮时带回该区域。

这样做的最佳方式是什么？

Answer 1

您可以尝试以下内容：

$('#make_hide_button').on('click', function() {
  $('#target_area').hide().find('input, textarea').prop('disabled', true);
});

$('#make_show_button').on('click', function() {
  $('#target_area').show().find('input, textarea').prop('disabled', false);
});

Answer 2

由于您未指定当前正在使用的代码，因此我只能为您提供一些一般性指导原则。

看一下jQuery hide()：

$("#myDivId").hide();

使用on()

检查如何绑定点击事件

$("#MyRadioButton").on("click", function(){
    $("#myDivId").hide();
});

$("#MyOtherButton").on("click", function(){
    $("#myDivId").show();
});

禁用/启用元素：

$("#MyElementId").prop("disabled", false);

$("#MyElementId").prop("disabled", true);

同样，这是一个让你开始的东西，你有一些遇到问题的代码，请随时发布，我相信我们可以帮助你。

Answer 3

您的问题中的更多代码肯定会与答案中的代码密切相关。

话虽如此，一般的方法是确保您知道输入所在的区域。可能使用data-属性或id的javascript数组，或者可能是classname。

一旦区域定义良好，您可以隐藏单选按钮，然后遍历定义的区域，禁用任何类型输入的元素。

修改

假设：

如果单击单选按钮，则需要禁用整个表单：

您的单选按钮的ID为“radButt”

<script type="text/javascript"> function GetParentForm(elem) { while (elem && elem.nodeName && elem.nodeName.toUpperCase() != "FORM") { elem = elem.parentNode; } return elem; } var changeState = 0; $("#radButt").click( function() { $(this).hide(); var thisForm = GetParentForm( $(this)[0] ); $(thisForm).find('input').prop('disabled', true); }); </script>

使用jQuery / JavaScript隐藏和禁用

3 个答案: