부트 스트랩에 입력 할 수 없습니다. 다른 태그에 어떻게 적용합니까?

Question

disabled 속성을 입력에 사용하면 사용자 입력을 방지하고 약간 다른 모양을 트리거 할 수 있습니다.
데모보기 http://jsfiddle.net/D2RLR/3023/

테이블과 같은 다른 태그에 같은 스타일을 적용하고 싶습니다.
사실 handsontable을 사용하여 Excel-like data grid editor을 생성합니다.
disabled attribute을 다음 문맥 (TAG 같은 표)으로 어떻게 적용 할 수 있습니까? - 사용

.readOnly 셀 속성이 http://handsontable.com/demo/conditional.html

있습니다 :

여기 http://jsfiddle.net/D2RLR/3025/

Answer 1

확인 여기 handsontable 및 bootstrap를 사용하여 데모입니다!

또한 HTML 입력은 readonly 속성을 가지고 있습니다.이 속성은 disabled 속성뿐만 아니라 그 동작간에 상당한 차이가 있습니다. 그래서 당신은 테이블이 같은 속성을 가지고 있지 않기 때문에, 그렇게 부트 스트랩 사용할 수 없습니다

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

:

Answer 2

부트 스트랩은 같은 자신의 disabled 속성에 따라 입력을 스타일링한다.

당신은 일종의 플러그인을 사용하거나 자신의 롤을 사용해야합니다.

Answer 3

부트 스트랩의 기존 input[disabled] 스타일링을 적용 할 수는 없지만 스타일을 정확히 모방 한 새로운 CSS를 추가 할 수 있습니다.

예를 들어

: (열 및 행 머리글이 같은 색이기 때문에), 그러나

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

은 분명이 당신의 읽기 전용 로직을 포함하지 않으며, looks a little weird with your fiddle은 그것의 요점입니다.

Answer 4

어쩌면이게 도움이 될 수 있습니다 ... 세포의 모양을 변경하고 그것에 편집 할 수 있습니다.

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"); 
     }); 
    }); 

});