切換爲無效文本字段

Question

我正在研究一個新概念，允許用戶更新其帳戶配置文件，而無需重新加載屏幕以允許更新。 目前，我有兩個部分將顯示他們已經提交的信息。默認情況下，所有字段都被禁用。每個部分都包含一個「編輯」按鈕以允許修改。 我面臨的問題是我的「編輯」按鈕正在啓用所有部分的編輯，而不是他們自己的部分。

Toggle Disabled fields for editing in Sections

這裏的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> 

這裏的DEMO：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/