Tôi có đầu vào sau:
<input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>Làm cách nào tôi có thể sử dụng jQuery để biến phần tử này thành đầu vào chỉ đọc mà không thay đổi thành phần hoặc giá trị của nó?
Tôi có đầu vào sau:
<input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname"/>Làm cách nào tôi có thể sử dụng jQuery để biến phần tử này thành đầu vào chỉ đọc mà không thay đổi thành phần hoặc giá trị của nó?
Câu trả lời:
chỉ cần thêm thuộc tính sau
// for disabled i.e. cannot highlight value or change
disabled="disabled"
// for readonly i.e. can highlight value but not change
readonly="readonly"jQuery để thực hiện thay đổi để các phần tử (thay thế disabledcho readonlytrong những điều sau đây để thiết lập readonlythuộc tính).
$('#fieldName').attr("disabled","disabled") hoặc là
$('#fieldName').attr("disabled", true) LƯU Ý: Kể từ jQuery 1.6, nên sử dụng .prop()thay vì .attr(). Các mã trên sẽ hoạt động chính xác như nhau ngoại trừ thay thế .attr()cho .prop().
Bạn có thể làm điều này bằng cách đơn giản đánh dấu nó disabledhoặc enabled. Bạn có thể sử dụng mã này để làm điều này:
//for disable
$('#fieldName').prop('disabled', true);
//for enable
$('#fieldName').prop('disabled', false);hoặc là
$ ('# fieldName'). prop ('chỉ đọc', đúng);
$ ('# fieldName'). prop ('chỉ đọc', sai);
--- Tốt hơn là sử dụng prop thay vì attr.
Sử dụng ví dụ này để tạo hộp văn bản ReadOnly hoặc 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>Có hai thuộc tính, cụ thể readonlyvà disabled, có thể tạo đầu vào chỉ đọc nửa đọc. Nhưng có một sự khác biệt nhỏ giữa chúng.
<input type="text" readonly />
<input type="text" disabled />readonlythuộc tính làm cho văn bản đầu vào của bạn khuyết tật, và người dùng không thể thay đổi được nữa.disabledThuộc tính không chỉ làm cho văn bản đầu vào của bạn bị vô hiệu hóa (không thể thay đổi) mà còn không thể gửi nó .Cách tiếp cận jQuery (1):
$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);Cách tiếp cận jQuery (2):
$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");Cách tiếp cận JavaScript:
document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;PS propgiới thiệu với jQuery 1.6.
Có thể sử dụng atribution bị vô hiệu hóa:
<input disabled="disabled" id="fieldName" name="fieldName" type="text" class="text_box" />Hoặc chỉ sử dụng thẻ nhãn :;)
<label><html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div>
<input id="fieldName" name="fieldName" type="text" class="text_box" value="Firstname" />
</div>
</body>
<script type="text/javascript">
$(function()
{
$('#fieldName').attr('disabled', 'disabled');
});
</script>
</html>Có lẽ nó cũng có ý nghĩa để thêm rằng
$('#fieldName').prop('readonly',false);có thể được sử dụng như một tùy chọn chuyển đổi ..
readonlythuộc tính cho phần tử, bất kể giá trị được truyền vào. Vì vậy, ví dụ của bạn sẽ kết thúc làm cho trường đầu vào chỉ đọc, mặc dù rõ ràng là đặt giá trị thành sai.
SetReadOnly (trạng thái) rất hữu ích cho các biểu mẫu, chúng ta có thể đặt bất kỳ trường nào thành setReadOnly (trạng thái) trực tiếp hoặc từ nhiều điều kiện khác nhau. Nhưng tôi thích sử dụng readOnly để đặt độ mờ cho bộ chọn nếu không thì attr = 'bị vô hiệu hóa' cũng hoạt động như cùng một cách
ví dụ chỉ đọc:
$('input').setReadOnly(true);hoặc thông qua các mã khác nhau như
var same = this.checked;
$('input').setReadOnly(same);ở đây chúng tôi đang sử dụng giá trị boolean trạng thái để đặt và xóa thuộc tính chỉ đọc khỏi đầu vào tùy thuộc vào một lần nhấp vào hộp kiểm.
Trong html
$('#raisepay_id').attr("readonly", true)
$("#raisepay_id").prop("readonly",true);trong bootstrap
$('#raisepay_id').attr("disabled", true)
$("#raisepay_id").prop("disabled",true);JQuery là một thư viện thay đổi và đôi khi họ thực hiện các cải tiến thường xuyên. .attr () được sử dụng để lấy các thuộc tính từ các thẻ HTML và mặc dù nó có chức năng hoàn hảo .prop () được thêm vào sau để có ngữ nghĩa hơn và nó hoạt động tốt hơn với các thuộc tính không có giá trị như 'được chọn' và 'được chọn'.
Bạn nên sử dụng phiên bản JQuery mới hơn, bạn nên sử dụng .prop () bất cứ khi nào có thể.