Đầu vào bị tắt trong bootstrap. Làm thế nào để áp dụng nó cho một TAG khác nhau?

Question

Bằng cách sử dụng thuộc tính disabled trên đầu vào có thể để ngăn đầu vào của người dùng và kích hoạt giao diện hơi khác.
Đây là bản demo http://jsfiddle.net/D2RLR/3023/

Giả sử tôi muốn áp dụng cùng một kiểu cho một TAG khác như bảng.
Thực tế, tôi đang sử dụng handsontable để tạo một Excel-like data grid editor.
Làm cách nào để áp dụng disabled attribute trong ngữ cảnh sau (TAG như bảng)?

Dưới đây là bản demo sử dụng handsontable và bootstraphttp://jsfiddle.net/D2RLR/3025/

Answer 1

Kiểm tra ở đây:

http://handsontable.com/demo/conditional.html

Có .readOnly tài sản di động - sử dụng nó!

Đầu vào HTML cũng có thuộc tính readonly, không chỉ là thuộc tính disabled, có một số khác biệt đáng kể giữa hành vi của chúng.

Answer 2

Boostrap chỉ styling đầu vào dựa trên thuộc tính tàn tật của họ như:

input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { 
    background-color: #EEEEEE; 
    cursor: not-allowed; 
} 

Vì vậy, bạn sẽ không thể sử dụng bootstrap để làm điều đó, bởi vì bảng không có thuộc tính như vậy.

Bạn nên sử dụng một plugin sắp xếp hoặc cuộn của riêng bạn.

Answer 3

Bạn không thể áp dụng kiểu dáng input[disabled] hiện có của Bootstrap, nhưng bạn có thể thêm CSS mới bắt chước chính xác kiểu.

Ví dụ:

#exampleGrid td { 
    cursor: not-allowed; 
    background-color: #EEE; 
    color: #9E9999; 
} 

Rõ ràng điều này không bao gồm logic readonly của bạn, và looks a little weird with your fiddle (vì các tiêu đề cột và hàng là cùng một màu sắc), nhưng đó là ý chính của nó.

Answer 4

Có thể điều này có thể giúp ... thay đổi giao diện của ô và bạn có thể chỉnh sửa trên đó.

HTML

<table class="editableTable"> 
    <thead> 
     <tr> 
      <th>Code</th> 
      <th>Name</th> 
      <th>E-mail</th> 
      <th>Telephone</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>001</td> 
      <td>João Carlos</td> 
      <td>joca@email.com</td> 
      <td>(21) 9999-8888</td> 
     </tr> 
     <tr> 
      <td>002</td> 
      <td>Maria Silva</td> 
      <td>mariasilva@mail.com</td> 
      <td>(81) 8787-8686</td> 
     </tr> 
     <tr> 
      <td>003</td> 
      <td>José Pedro</td> 
      <td>zepedro@meuemail.com</td> 
      <td>(84) 3232-3232</td> 
     </tr> 
    </tbody> 
</table> 

CSS

* { 
    font-family: Consolas; 
} 

.editableTable { 
    border: solid 1px; 
    width: 100% 
} 

.editableTable td { 
    border: solid 1px; 
} 

.editableTable .editingCell { 
    padding: 0; 
} 

.editableTable .editingCell input[type=text] { 
    width: 100%; 
    border: 0; 
    background-color: rgb(255,253,210); 
} 

JS

$(function() { 

    $("td").dblclick(function() { 
     var originalContent = $(this).text(); 

     $(this).addClass("editingCell"); 
     $(this).html("<input type='text' value='" + originalContent + "' />"); 
     $(this).children().first().focus(); 

     $(this).children().first().keypress(function (e) { 
      if (e.which == 13) { 
       var newContent = $(this).val(); 
       $(this).parent().text(newContent); 
       $(this).parent().removeClass("editingCell"); 
      } 
     }); 

     $(this).children().first().blur(function(){ 
      $(this).parent().text(originalContent); 
      $(this).parent().removeClass("editingCell"); 
     }); 
    }); 

});