[jquery] jQuery를 사용하여 입력을 읽기 전용으로 만들려면 어떻게해야합니까?

다음과 같은 입력이 있습니다.

  <input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>

jQuery를 사용하여 요소 또는 값을 변경하지 않고이 요소를 읽기 전용 입력으로 만들려면 어떻게해야합니까?

답변

요즘 jQuery 1.6.1 이상에서는 부울 속성 / 속성을 설정할 때 .prop ()를 사용하는 것이 좋습니다.

$("#fieldName").prop("readonly", true);

답변

단순히 다음 속성을 추가하십시오

// for disabled i.e. cannot highlight value or change
disabled="disabled"

// for readonly i.e. can highlight value but not change
readonly="readonly"

jQuery를은 (대체 원소로 변경하기 disabled위한 readonly설정에 대해 다음의 readonly속성).

$('#fieldName').attr("disabled","disabled")

또는

$('#fieldName').attr("disabled", true)

참고 : jQuery 1.6부터는 .prop()대신 사용 하는 것이 좋습니다 .attr(). 위의 코드는를 대신 .attr()하는 것을 제외하고는 정확히 동일하게 작동합니다 .prop().

답변

입력을 읽기 전용으로 사용하려면 :

 $("#fieldName").attr('readonly','readonly');

읽기 / 쓰기 사용하기 :

$("#fieldName").removeAttr('readonly');

disabled속성을 추가하면 값이 post와 함께 보내지 않습니다.

답변

간단히 disabled또는로 표시하면 enabled됩니다. 이 코드를 사용하여 다음을 수행 할 수 있습니다.

//for disable
$('#fieldName').prop('disabled', true);

//for enable 
$('#fieldName').prop('disabled', false);

또는

$ ( ‘# fieldName’). prop ( ‘readonly’, true);

$ ( ‘# fieldName’). prop ( ‘readonly’, false);

— attr 대신 prop를 사용하는 것이 좋습니다.

답변

이 예제를 사용하여 텍스트 상자를 ReadOnly 또는 Not으로 만듭니다.

<input type="textbox" class="txt" id="txt"/>
<input type="button" class="Btn_readOnly" value="Readonly" />
<input type="button" class="Btn_notreadOnly" value="Not Readonly" />

<script>

    $(document).ready(function(){
       ('.Btn_readOnly').click(function(){
           $("#txt").prop("readonly", true);
       });

       ('.Btn_notreadOnly').click(function(){
           $("#txt").prop("readonly", false);
       });
    });

</script>

답변

두 가지, 즉 속성이 있습니다 readonly및 disabled반 읽기 전용 입력을 할 수 있습니다. 그러나 그들 사이에는 작은 차이가 있습니다.

<input type="text" readonly />
<input type="text" disabled />

이 readonly속성은 입력 텍스트를 비활성화하며 사용자는 더 이상 텍스트를 변경할 수 없습니다.
이 disabled속성은 입력 텍스트를 비활성화 (변경 불가능 )하게 할뿐만 아니라 제출할 수 없습니다 .

jQuery 접근법 (1) :

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

jQuery 접근 방식 (2) :

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

자바 스크립트 접근 :

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PS (으)로 prop소개했습니다 jQuery 1.6.

답변

주어진-

<input name="foo" type="text" value="foo" readonly />

이것은 작동합니다-(jquery 1.7.1)

$('input[name="foo"]').prop('readonly', true);

읽기 전용 및 readOnly로 테스트했습니다. 둘 다 작동했습니다.