javascript - 使用 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-属性或 ids 的 javascript 数组，或者也许通过类名。

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

编辑

假设：

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

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