使用 jQuery/JavaScript 隐藏和禁用 [关闭]

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- 属性或 javascript id 数组，或者可能通过类名。

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

编辑

假设：

如果单击单选按钮，您希望禁用整个表单：

您的单选按钮的 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>