在区段中禁用切换到无法打开的文本字段

Question

我正在致力于一个新的概念，允许用户更新他们的帐户配置文件，而不需要重新加载屏幕，以允许更新。目前，我有两个部分将显示他们已经提交的信息。默认情况下，所有字段都被禁用。每个部分包含一个“编辑”按钮，以允许修改。我面临的问题是，我的“编辑”按钮允许在所有部分上进行编辑，而不是它们自己的部分。

在节中切换用于编辑的禁用字段

这里是HTML代码：

<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.

User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
        <section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
            <!-- FIRST AND NAME SECTION -->
            <div class="col-lg-12 no-padding no-margin clearfix">
                <div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
                    <h1 class="h1-header"><i class="fa fa-users"></i> First &amp; Last Name Section</h1>
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
                    <div class="positioning">
                    <input type="button" class="btn btn-warning" value="Edit" />
                    </div>
                </div>
                <div class="col-md-12 spacer"></div>
                <div class="col-mg-12 horizontal-line"></div>
                <div class="col-md-12 spacer"></div>
            </div>

            <div class="col-lg-12">
                <div class="col-md-6 col-sm-6">
                    <div class="input-group">
                        <input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>
                    <div class="spacer"></div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="input-group">
                        <input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>
                    <div class="spacer"></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <!-- /FIRST AND LAST NAME SECTION/ -->
        </section>

        <div class="col-lg-12 spacer"></div>
        <hr class="horizontal-line" />
        <div class="spacer"></div>

        <section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
            <!-- EMAIL AND PHONE SECTION -->
            <div class="col-lg-12 no-padding no-margin clearfix">
                <div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
                    <h1 class="h1-header"><i class="fa fa-envelope"></i> Email &amp; Phone# Section</h1>
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
                    <div class="positioning">
                    <input type="button" class="btn btn-warning" value="Edit" />
                    </div>
                </div>
                <div class="col-md-12 spacer"></div>
                <div class="col-mg-12 horizontal-line"></div>
                <div class="col-md-12 spacer"></div>
            </div>
            <div class="col-lg-12">
                <div class="col-md-6 col-sm-6">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="emailaccount@isp.com" disabled />
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>
                    <div class="spacer"></div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="801-999-9999" disabled />
                        <span class="input-group-addon">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>
                    <div class="spacer"></div>
                </div>
            </div>
            <div class="clearfix"></div>
            <!-- EMAIL AND PHONE SECTION -->
        </section>
        <div class="clearfix"></div>
        <hr />
        <div class="clearfix"></div>
    <div class="align-text-center">
        <button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
    </div>
    </form>
</div>

这是JS：

<script>
(function($) {
    $.fn.toggleDisabled = function() {
        return this.each(function() {
            var $this = $(this);
            if ($this.attr('disabled')) $this.removeAttr('disabled');
            else $this.attr('disabled', 'disabled');
        });
    };
})(jQuery);

$(function() {
    //$('input:editlink').click(function() {
    $('input:button').click(function() {
        $('input:text').toggleDisabled();
    });
});
</script>

下面是演示：https://jsfiddle.net/UXEngineer/7tft16pt/35/

因此，我试图使单个编辑只启用与其关联的部分。

有人能帮忙解决这个问题吗？我很感谢你的帮助，谢谢！

Answer 1

您可以使用：

$(function() {

    $('input:button').click(function() {

        $(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
    });
});

演示：https://jsfiddle.net/7tft16pt/38/

使用最近() -> https://api.jquery.com/closest/和next() -> https://api.jquery.com/next/