使用 jQuery/JavaScript 隐藏和禁用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11957915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 14:53:01  来源:igfitidea点击:

Hide and disable with jQuery/JavaScript

javascriptjqueryhtml

提问by Joe

I have a section of my page that I want to hide when the user clicks a certain radio button. But in addition to hiding the area, I want disable all inputs in that area. I also want to bring back the area when the user hits another button.

当用户单击某个单选按钮时,我想隐藏我的页面的一部分。但除了隐藏该区域之外,我还想禁用该区域的所有输入。我还想在用户点击另一个按钮时恢复该区域。

What is the best way to go about doing this?

这样做的最佳方法是什么?

回答by thecodeparadox

You can try something like below:

您可以尝试以下操作:

$('#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);
});

回答by Nope

As you have specified no current code you are working with I can only give you a few general guidelines.

由于您没有指定您正在使用的当前代码,因此我只能为您提供一些通用指南。

Have a look at jQuery hide():

看看 jQuery hide()

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

Check how to bind click events using on()

检查如何使用on()绑定点击事件

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

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

To disable/enable elements:

禁用/启用元素:

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

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

Again, this is something to get your started, ones you have some code you experience issues with, please feel free to post it and I'm sure we can manage to help you out.

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

回答by Travis J

More code in your question would definitely have a strong relation to having code in answers.

您的问题中的更多代码肯定与答案中的代码有很强的关系。

That being said, a general approach is going to be making sure you know which area the input was in. Perhaps with data-attributes or a javascript array of ids, or maybe by classname.

话虽如此,一般的方法是确保您知道输入位于哪个区域。也许使用data-属性或 javascript id 数组,或者通过类名。

Once the area is well defined, you can hide the radio button, and then iterate through the defined area disabling any elements which are of type input.

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

EDIT

编辑

Assumptions:

假设:

  • you want the entire form disabled if the radio button is clicked:
  • 如果单击单选按钮,您希望禁用整个表单:
  • your radio button has an id of "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>
    
  • 您的单选按钮的 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>