Làm thế nào để loại bỏ thuộc tính vô hiệu hóa của một textarea bằng cách sử dụng jQuery?

Question

Tôi có nhiều văn bản trong biểu mẫu HTML của tôi, sau đó là liên kết chỉnh sửa cho từng trang. Khi tôi nhấp vào liên kết chỉnh sửa , văn bản tương ứng sẽ được bật. Mã của tôi như sau:

<script type="text/javascript"> 

    $(document).ready(function() { 

     $(".edit").click(function(){ 
      $(this).attr("id").removeAttr("disabled"); 
     }); 

    }); 

</script> 

<textarea id="txt1" disabled="true"></textarea> 
<a class="edit" id="txt1" >edit</a> 

<textarea id="txt2" disabled="true"></textarea> 
<a class="edit" id="txt2" >edit</a> 

Tại sao văn bản không được bật khi liên kết tương ứng được nhấp?

Answer 1

id s chỉ có thể được sử dụng một lần trong một trang. bạn không thể có 2 phần tử (hoặc nhiều hơn) có cùng một id.

thay vào đó, do this:

<form id="myform"> 
    <!-- group each in divs --> 
    <div> 
     <textarea disabled="true"></textarea> 
     <a class="edit">edit</a> 
    </div> 
    <div> 
     <textarea disabled="true"></textarea> 
     <a class="edit">edit</a> 
    </div> 
</form> 
<script> 
    $(function(){ 
     $('#myform').on('click','.edit',function(){ 
      $(this)      //when edit is clicked 
       .siblings('textarea')  //find it's pair textarea 
       .prop("disabled", false) //and enable 
      return false; 
     }); 
    }); 
</script> 

nếu bạn không thể sử dụng divs, sau đó bạn có thể sử dụng prev('textarea') thay vì siblings('textarea') để có được những textarea trước.

Answer 2

Vì đó là trình xử lý onclick, $ (this) sẽ trỏ đến phần tử bạn đã nhấp vào, là thẻ <a>. Điều đó không có một khuyết tật. Bạn cần phải di chuyển lên cây dom đến nút phụ huynh, which'd là textarea, và loại bỏ các thuộc tính tàn tật có:

$(this).parent().removeAttr("disabled"); 

Answer 3

Bạn đang sử dụng lại các giá trị ID - đây là số không lớn. Nếu bạn định cung cấp ID này, bạn cần phải làm một điều gì đó để phân biệt liên kết txt1 từ văn bản txt1. Trong mã bên dưới, tôi đã thêm hậu tố _link vào liên kết.

<textarea id="txt1" disabled="true"></textarea> 
<a class="edit" id="txt1_link">edit</a> 

<textarea id="txt2" disabled="true"></textarea> 
<a class="edit" id="txt2_link">edit</a> 

Với sự thay đổi nhỏ, chúng tôi bây giờ có thể thay đổi thuộc tính tàn tật của textarea:

$(".edit").on("click", function(e){ 
    $("#" + this.id.replace("_link", "")).prop("disabled", false); 
    e.preventDefault(); 
}); 

Bộ chọn, không may, bao gồm việc sử dụng các phương pháp replace(). Nếu bạn loại bỏ sự mơ hồ trong ID giữa các liên kết và các textareas, bạn có thể làm điều này.

Demo: http://jsbin.com/unebur/edit#javascript,html

Answer 4

Bạn đang cố gắng để loại bỏ thuộc tính tàn tật của thẻ neo bởi $ (this). Thử cái này.

<script type="text/javascript"> 

     $(document).ready(function() { 

      $(".edit").click(function(){ 
       $("#"+$(this).attr("rel")).removeAttr("disabled"); 
      }); 

     }); 

</script> 

<textarea id="txt1" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt1" >edit</a> 
<textarea id="txt2" class="txtedit" disabled="true"></textarea><a class="edit" rel="txt2" >edit</a> 

Answer 5

Xin chào xin vui lòng thực hiện một số thay đổi như đề cập dưới đây

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.txtAreas').attr('disabled', true); 

      $("#txt3").click(function() { 
      $('#txt1').removeAttr("disabled"); 
      }); 

      $("#txt4").click(function() { 
      $('#txt2').removeAttr("disabled"); 
      }); 

    }); 
</script> 

    <textarea id="txt1" class="txtAreas"></textarea><a href="#" class="edit" id="txt3">edit</a> 
    <textarea id="txt2" class="txtAreas"></textarea><a href="#" class="edit" id="txt4">edit</a>