Tại sao các nút radio không thể đọc được

Tôi muốn hiển thị một nút radio, gửi giá trị của nó, nhưng tùy thuộc vào hoàn cảnh, nó không thể chỉnh sửa được. Vô hiệu hóa không hoạt động, bởi vì nó không gửi giá trị (hoặc nó?), Và nó làm mờ nút radio. Chỉ đọc thực sự là những gì tôi đang tìm kiếm, nhưng vì một số lý do bí ẩn, nó không hoạt động.

Có một số mẹo kỳ lạ tôi cần phải kéo để chỉ đọc để hoạt động như mong đợi? Tôi có nên làm điều đó trong JavaScript thay thế?

Ngẫu nhiên, có ai biết tại sao chỉ đọc không hoạt động trong các nút radio, trong khi nó chỉ hoạt động trong các thẻ đầu vào khác không? Đây có phải là một trong những thiếu sót không thể hiểu được trong thông số kỹ thuật HTML không?

Tôi đã giả mạo chỉ đọc trên một nút radio bằng cách chỉ vô hiệu hóa các nút radio chưa được kiểm tra. Nó giữ cho người dùng chọn một giá trị khác và giá trị được kiểm tra sẽ luôn được đăng khi gửi.

Sử dụng jQuery để chỉ đọc:

$(':radio:not(:checked)').attr('disabled', true);

Cách tiếp cận này cũng hoạt động để tạo danh sách chọn chỉ đọc, ngoại trừ việc bạn sẽ cần tắt từng tùy chọn chưa chọn.

Các nút radio sẽ chỉ cần đọc chỉ khi có các tùy chọn khác. Nếu bạn không có bất kỳ tùy chọn nào khác, có thể bỏ chọn nút radio đã chọn. Nếu bạn có các tùy chọn khác, bạn có thể ngăn người dùng thay đổi giá trị chỉ bằng cách vô hiệu hóa các tùy chọn khác:

<input type="radio" name="foo" value="Y" checked>
<input type="radio" name="foo" value="N" disabled>

Câu đố: http://jsfiddle.net/qqVGu/

Đây là mẹo bạn có thể đi với.

<input type="radio" name="name" onclick="this.checked = false;" />

Tôi có một hình thức dài (hơn 250 trường) gửi lên db. Nó là một ứng dụng việc làm trực tuyến. Khi quản trị viên xem xét một ứng dụng đã được nộp, biểu mẫu được điền với dữ liệu từ db. Văn bản đầu vào và văn bản được thay thế bằng văn bản họ đã gửi nhưng radio và hộp kiểm rất hữu ích để giữ làm thành phần của biểu mẫu. Vô hiệu hóa chúng làm cho chúng khó đọc hơn. Đặt thuộc tính .checked thành false onclick sẽ không hoạt động vì chúng có thể đã được người dùng kiểm tra điền vào ứng dụng. Nhưng dù sao ...

onclick="return false;"

hoạt động như một cơ duyên cho 'vô hiệu hóa' radio và hộp kiểm ipso facto.

Giải pháp tốt nhất là đặt trạng thái được kiểm tra hoặc không được kiểm tra (từ máy khách hoặc máy chủ) và không để người dùng thay đổi nó sau khi phường (tức là làm cho nó chỉ đọc) làm như sau:

<input type="radio" name="name" onclick="javascript: return false;" />

Tôi đã nghĩ ra một cách nặng về javascript để đạt được trạng thái chỉ đọc cho các hộp kiểm và các nút radio. Nó được thử nghiệm với các phiên bản hiện tại của Firefox, Opera, Safari, Google Chrome, cũng như các phiên bản IE hiện tại và trước đây (xuống IE7).

Tại sao không chỉ đơn giản là sử dụng tài sản khuyết tật bạn yêu cầu? Khi in trang, các yếu tố đầu vào bị vô hiệu hóa có màu xám. Khách hàng đã thực hiện điều này muốn tất cả các yếu tố có cùng màu.

Tôi không chắc mình có được phép đăng mã nguồn ở đây không, vì tôi đã phát triển nó khi làm việc cho một công ty, nhưng tôi chắc chắn có thể chia sẻ các khái niệm.

Với các sự kiện onmousedown, bạn có thể đọc trạng thái lựa chọn trước khi hành động nhấp thay đổi nó. Vì vậy, bạn lưu trữ thông tin này và sau đó khôi phục các trạng thái này bằng một sự kiện onclick.

<input id="r1" type="radio" name="group1" value="r1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="r2" type="radio" name="group1" value="r2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="r3" type="radio" name="group1" value="r3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 3</input>

<input id="c1" type="checkbox" name="group2" value="c1" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 1</input>
<input id="c2" type="checkbox" name="group2" value="c2" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);">Option 2</input>
<input id="c3" type="checkbox" name="group2" value="c3" onmousedown="storeSelectedRadiosForThisGroup(this.name);" onclick="setSelectedStateForEachElementOfThisGroup(this.name);" checked="checked">Option 3</input>

Phần javascript của phần này sau đó sẽ hoạt động như thế này (chỉ một lần nữa các khái niệm):

var selectionStore = new Object();  // keep the currently selected items' ids in a store

function storeSelectedRadiosForThisGroup(elementName) {
    // get all the elements for this group
    var radioOrSelectGroup = document.getElementsByName(elementName);

    // iterate over the group to find the selected values and store the selected ids in the selectionStore
    // ((radioOrSelectGroup[i].checked == true) tells you that)
    // remember checkbox groups can have multiple checked items, so you you might need an array for the ids
    ...
}

function setSelectedStateForEachElementOfThisGroup(elementName) {
    // iterate over the group and set the elements checked property to true/false, depending on whether their id is in the selectionStore
    ...

    // make sure you return false here
    return false;
}

Bây giờ bạn có thể bật / tắt các nút / hộp kiểm radio bằng cách thay đổi thuộc tính onclick và onmousedown của các thành phần đầu vào.

Cách JavaScript - điều này làm việc cho tôi.

<script>
$(document).ready(function() {
   $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); });
});
</script>

Lý do:

1. $('#YourTableId').find('*') -> cái này trả về tất cả các thẻ.

2. $('#YourTableId').find('*').each(function () { $(this).attr("disabled", true); }); lặp đi lặp lại trên tất cả các đối tượng được chụp trong này và vô hiệu hóa các thẻ đầu vào.

Phân tích (Gỡ lỗi):

1. form:radiobutton được xem xét nội bộ như một thẻ "đầu vào".

2. Giống như trong hàm trên (), nếu bạn thử in document.write(this.tagName);

3. Bất cứ nơi nào, trong các thẻ nó tìm thấy các nút radio, nó sẽ trả về một thẻ đầu vào.

Vì vậy, dòng mã trên có thể được tối ưu hóa nhiều hơn cho các thẻ nút radio, bằng cách thay thế * bằng đầu vào: $('#YourTableId').find('input').each(function () { $(this).attr("disabled", true); });

Một tùy chọn khá đơn giản sẽ là tạo một hàm javascript được gọi trong sự kiện "onsubmit" của biểu mẫu để kích hoạt lại radiobutton để giá trị của nó được đăng cùng với phần còn lại của biểu mẫu.
Nó dường như không phải là một thiếu sót trong thông số kỹ thuật HTML, nhưng một lựa chọn thiết kế (một logic, IMHO), một radiobutton không thể chỉ đọc như một nút không thể, nếu bạn không muốn sử dụng nó, sau đó bạn không muốn sử dụng nó vô hiệu hóa nó

Tôi thấy rằng onclick='this.checked = false;'việc sử dụng đã làm việc ở một mức độ nhất định. Một nút radio đã được bấm sẽ không được chọn. Tuy nhiên, nếu có một nút radio đã được chọn (ví dụ: giá trị mặc định), nút radio đó sẽ không được chọn.

<!-- didn't completely work -->
<input type="radio" name="r1" id="r1" value="N" checked="checked" onclick='this.checked = false;'>N</input>
<input type="radio" name="r1" id="r1" value="Y" onclick='this.checked = false;'>Y</input>

Đối với trường hợp này, chỉ để lại giá trị mặc định và vô hiệu hóa (các) nút radio khác sẽ duy trì nút radio đã chọn và ngăn không cho nó không được chọn.

<!-- preserves pre-selected value -->
<input type="radio" name="r1" id="r1" value="N" checked="checked">N</input>
<input type="radio" name="r1" id="r1" value="Y" disabled>Y</input>

Giải pháp này không phải là cách thanh lịch nhất để ngăn giá trị mặc định bị thay đổi, nhưng nó sẽ hoạt động cho dù javascript có được bật hay không.

Đối với các nút radio không được chọn, gắn cờ chúng là vô hiệu hóa. Điều này ngăn họ phản hồi với đầu vào của người dùng và xóa nút radio đã kiểm tra. Ví dụ:

<input type="radio" name="var" checked="yes" value="Yes"></input>
<input type="radio" name="var" disabled="yes" value="No"></input>

Hãy thử thuộc tính disabled, nhưng tôi nghĩ rằng bạn sẽ không nhận được giá trị của các nút radio. Hoặc đặt hình ảnh thay vì như:

<img src="itischecked.gif" alt="[x]" />radio button option

Trân trọng.

Tôi đang sử dụng plugin JS định kiểu các thành phần hộp kiểm / đầu vào radio và sử dụng jQuery sau để thiết lập 'trạng thái chỉ đọc' trong đó giá trị cơ bản vẫn được đăng nhưng yếu tố đầu vào xuất hiện không thể truy cập được đối với người dùng, tôi tin rằng đó là lý do dự định chúng ta sẽ sử dụng thuộc tính đầu vào chỉ đọc ...

if ($(node).prop('readonly')) {
    $(node).parent('div').addClass('disabled'); // just styling, appears greyed out
    $(node).on('click', function (e) {
        e.preventDefault();
    });
}

Điều gì về việc bắt một sự kiện "On_click ()" trong JS và kiểm tra nó như ở đây?:

http://www.dynamicdrive.com/forums/showthread.php?t=33043