Các hộp kiểm HTML có thể được đặt thành chỉ đọc không?

Tôi nghĩ rằng họ có thể, nhưng vì tôi không đặt tiền của mình vào nơi mà miệng tôi (có thể nói) thiết lập thuộc tính chỉ đọc dường như không thực sự làm gì cả.

Tôi không muốn sử dụng Vô hiệu hóa, vì tôi muốn các hộp kiểm đã chọn được gửi cùng với phần còn lại của biểu mẫu, tôi chỉ không muốn khách hàng có thể thay đổi chúng trong một số trường hợp nhất định.

bạn có thể sử dụng cái này:

<input type="checkbox" onclick="return false;"/>

Điều này hoạt động vì trả về false từ sự kiện nhấp chuột sẽ dừng chuỗi thực thi tiếp tục.

READONLYkhông hoạt động trên các hộp kiểm vì nó ngăn bạn chỉnh sửa giá trị của một trường , nhưng với hộp kiểm bạn thực sự đang chỉnh sửa trạng thái của trường (tắt | | tắt)

Từ faqs.org :

Điều quan trọng là phải hiểu rằng SYN SÀNG chỉ ngăn người dùng thay đổi giá trị của trường chứ không phải tương tác với trường. Ví dụ, trong các hộp kiểm, bạn có thể bật hoặc tắt chúng (do đó đặt trạng thái KIỂM TRA) nhưng bạn không thay đổi giá trị của trường.

Nếu bạn không muốn sử dụng disablednhưng vẫn muốn gửi giá trị, làm thế nào về việc gửi giá trị dưới dạng trường ẩn và chỉ in nội dung của nó cho người dùng khi họ không đáp ứng tiêu chí chỉnh sửa? ví dụ

// user allowed change
if($user_allowed_edit)
{
    echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
    // Not allowed change - submit value..
    echo '<input type="hidden" name="my_check" value="1" />';
    // .. and show user the value being submitted
    echo '<input type="checkbox" disabled readonly> Check value';
}

Đây là hộp kiểm bạn không thể thay đổi:

<input type="checkbox" disabled="disabled" checked="checked">

Chỉ cần thêm disabled="disabled"như một thuộc tính.

Chỉnh sửa để giải quyết các ý kiến:

Nếu bạn muốn dữ liệu được đăng lại, hơn một giải pháp đơn giản là áp dụng cùng tên cho một đầu vào ẩn:

<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>

Theo cách này, khi hộp kiểm được đặt thành 'bị vô hiệu hóa', nó chỉ phục vụ mục đích thể hiện trực quan dữ liệu, thay vì thực sự được 'liên kết' với dữ liệu. Trong bài đăng trở lại, giá trị của đầu vào ẩn đang được gửi khi hộp kiểm bị vô hiệu hóa.

<input type="checkbox" onclick="this.checked=!this.checked;">

Nhưng bạn tuyệt đối PHẢI xác thực dữ liệu trên máy chủ để đảm bảo dữ liệu không bị thay đổi.

một "giải pháp đơn giản" khác:

<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" /> 
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />

bị vô hiệu hóa = "bị vô hiệu hóa" / bị vô hiệu hóa = đúng

Điều này trình bày một chút về một vấn đề khả năng sử dụng.

Nếu bạn muốn hiển thị một hộp kiểm, nhưng không để nó được tương tác, tại sao lại là một hộp kiểm?

Tuy nhiên, cách tiếp cận của tôi sẽ là sử dụng bị vô hiệu hóa (Người dùng hy vọng hộp kiểm bị vô hiệu hóa không thể chỉnh sửa được, thay vì sử dụng JS để làm cho một cái được kích hoạt không hoạt động) và thêm một trình xử lý biểu mẫu bằng cách sử dụng javascript cho phép các hộp kiểm ngay trước biểu mẫu nộp. Bằng cách này, bạn sẽ nhận được giá trị của bạn được đăng.

tức là một cái gì đó như thế này:

var form = document.getElementById('yourform');
form.onSubmit = function () 
{ 
    var formElems = document.getElementsByTagName('INPUT');
    for (var i = 0; i , formElems.length; i++)
    {  
       if (formElems[i].type == 'checkbox')
       { 
          formElems[i].disabled = false;
       }
    }
}

<input type="checkbox" readonly="readonly" name="..." />

với niềm đam mê:

$(':checkbox[readonly]').click(function(){
            return false;
        });

nó vẫn có thể là một ý tưởng tốt để đưa ra một số gợi ý trực quan (css, văn bản, ...), rằng điều khiển sẽ không chấp nhận đầu vào.

Tôi đã sử dụng điều này để đạt được kết quả:

<input type=checkbox onclick="return false;" onkeydown="return false;" />

Tôi tình cờ nhận thấy giải pháp được đưa ra dưới đây. Trong tìm thấy nó nghiên cứu của tôi cho cùng một vấn đề. Tôi không phải là người đã đăng nó nhưng nó không phải do tôi tạo ra. Nó sử dụng jQuery:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

Điều này sẽ làm cho các hộp kiểm chỉ đọc sẽ hữu ích cho việc hiển thị dữ liệu chỉ đọc cho khách hàng.

onclick="javascript: return false;"

Câu trả lời muộn màng, nhưng hầu hết các câu trả lời dường như quá phức tạp nó.

Theo tôi hiểu, OP về cơ bản là muốn:

1. Hộp kiểm chỉ đọc để hiển thị trạng thái.
2. Giá trị trả về với hình thức.

Cần lưu ý rằng:

1. OP không muốn sử dụng disabledthuộc tính này, vì họ 'muốn các hộp kiểm đã chọn được gửi cùng với phần còn lại của biểu mẫu'.
2. Các hộp kiểm không được chọn không được gửi cùng với biểu mẫu, vì trích dẫn từ OP trong 1. ở trên cho thấy họ đã biết. Về cơ bản, giá trị của hộp kiểm chỉ tồn tại nếu được chọn.
3. Một hộp kiểm bị vô hiệu hóa rõ ràng rằng nó không thể thay đổi, theo thiết kế, do đó người dùng không có khả năng cố gắng thay đổi nó.
4. Giá trị của hộp kiểm tra không giới hạn trong việc chỉ ra trạng thái của nó, chẳng hạn như yeshoặc false, nhưng có thể là bất kỳ văn bản nào.

Do đó, vì readonlythuộc tính không hoạt động, giải pháp tốt nhất, không yêu cầu javascript, là:

1. Một hộp kiểm bị vô hiệu hóa, không có tên hoặc giá trị.
2. Nếu hộp kiểm sẽ được hiển thị dưới dạng đã chọn, một trường ẩn có tên và giá trị được lưu trữ trên máy chủ.

Vì vậy, đối với một hộp kiểm tra:

<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />

Đối với một hộp kiểm không được chọn:

<input type="checkbox" disabled="disabled" />

Vấn đề chính với các đầu vào bị vô hiệu hóa, đặc biệt là các hộp kiểm, là độ tương phản kém của chúng có thể là vấn đề đối với một số người có khuyết tật thị giác nhất định. Có thể tốt hơn để chỉ ra một giá trị bằng các từ đơn giản, chẳng hạn như Status: nonehoặc Status: implemented, nhưng bao gồm cả đầu vào ẩn ở trên khi sử dụng sau, chẳng hạn như:

<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>

Hầu hết các câu trả lời hiện tại có một hoặc nhiều vấn đề sau:

1. Chỉ kiểm tra chuột không bàn phím.
2. Chỉ kiểm tra tải trang.
3. Kết nối sự thay đổi phổ biến hoặc gửi các sự kiện sẽ không luôn diễn ra nếu có điều gì khác xảy ra.
4. Yêu cầu đầu vào ẩn hoặc các thành phần / thuộc tính đặc biệt khác mà bạn phải hoàn tác để bật lại hộp kiểm bằng javascript.

Sau đây là đơn giản và không có vấn đề nào.

$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
    if($(this).is('[readonly]')) { return false; }
});

Nếu hộp kiểm chỉ đọc, nó sẽ không thay đổi. Nếu không, nó sẽ. Nó sử dụng jquery, nhưng có lẽ bạn đã sử dụng nó ...

Nó hoạt động.

<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>

Nếu bạn muốn chúng được gửi đến máy chủ với biểu mẫu nhưng không tương tác với người dùng, bạn có thể sử dụng pointer-events: nonetrong css ( hoạt động trong tất cả các trình duyệt hiện đại ngoại trừ IE10- và Opera 12- ) và đặt chỉ mục tab  -1để ngăn thay đổi qua bàn phím. Cũng lưu ý rằng bạn không thể sử dụng labelthẻ vì nhấp vào nó sẽ thay đổi trạng thái.

input[type="checkbox"][readonly] {
  pointer-events: none !important;
}

td {
  min-width: 5em;
  text-align: center;
}

td:last-child {
  text-align: left;
}

<table>
  <tr>
    <th>usual
    <th>readonly
    <th>disabled
  </tr><tr>
    <td><input type=checkbox />
    <td><input type=checkbox readonly tabindex=-1 />
    <td><input type=checkbox disabled />
    <td>works
  </tr><tr>
    <td><input type=checkbox checked />
    <td><input type=checkbox readonly checked tabindex=-1 />
    <td><input type=checkbox disabled checked />
    <td>also works
  </tr><tr>
    <td><label><input type=checkbox checked /></label>
    <td><label><input type=checkbox readonly checked tabindex=-1 /></label>
    <td><label><input type=checkbox disabled checked /></label>
    <td>broken - don't use label tag
  </tr>
</table>

<input type="checkbox" onclick="return false" /> sẽ làm việc cho bạn, tôi đang sử dụng này

Một số câu trả lời ở đây có vẻ hơi vòng vo, nhưng đây là một hack nhỏ.

<form id="aform" name="aform" method="POST">
    <input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
    <input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>​

sau đó trong jquery bạn có thể chọn một trong hai tùy chọn:

$(document).ready(function(){
    //first option, you don't need the disabled attribute, this will prevent
    //the user from changing the checkbox values
    $("input[name^='chkBox_1']").click(function(e){
        e.preventDefault();
    });

    //second option, keep the disabled attribute, and disable it upon submit
    $("#submitBttn").click(function(){
        $("input[name^='chkBox_1']").attr("disabled",false);
        $("#aform").submit();
    });

});

Hay nói, là một tài tài của, qua, qua, qua một tài khác, qua giữ, qua một tài khác

bản demo: http://jsfiddle.net/5WFYt/

Dựa trên các câu trả lời trên, nếu sử dụng jQuery, đây có thể là một giải pháp tốt cho tất cả các đầu vào:

<script>
    $(function () {
        $('.readonly input').attr('readonly', 'readonly');
        $('.readonly textarea').attr('readonly', 'readonly');
        $('.readonly input:checkbox').click(function(){return false;});
        $('.readonly input:checkbox').keydown(function () { return false; });
    });
</script>

Tôi đang sử dụng điều này với Asp.Net MVC để đặt một số thành phần biểu mẫu chỉ đọc. Các công việc trên cho văn bản và hộp kiểm bằng cách đặt bất kỳ vùng chứa cha nào là .readonly, chẳng hạn như các tình huống sau:

<div class="editor-field readonly">
    <input id="Date" name="Date" type="datetime" value="11/29/2012 4:01:06 PM" />
</div>
<fieldset class="flags-editor readonly">
     <input checked="checked" class="flags-editor" id="Flag1" name="Flags" type="checkbox" value="Flag1" />
</fieldset>

<input type="radio" name="alwaysOn" onchange="this.checked=true" checked="checked">
<input type="radio" name="alwaysOff" onchange="this.checked=false" >

Tôi biết rằng "khuyết tật" không phải là một câu trả lời chấp nhận được, vì op muốn nó đăng. Tuy nhiên, bạn sẽ luôn phải xác thực các giá trị ở phía máy chủ NGAY CẢ nếu bạn có tùy chọn chỉ đọc. Điều này là do bạn không thể ngăn người dùng độc hại đăng các giá trị bằng thuộc tính chỉ đọc.

Tôi khuyên bạn nên lưu trữ giá trị ban đầu (phía máy chủ) và đặt nó thành vô hiệu hóa. Sau đó, khi họ gửi biểu mẫu, bỏ qua mọi giá trị được đăng và lấy các giá trị ban đầu mà bạn đã lưu trữ.

Nó sẽ nhìn và hành xử giống như nó là một giá trị chỉ đọc. Và nó xử lý (bỏ qua) bài viết từ người dùng độc hại. Bạn đang giết 2 con chim bằng một hòn đá.

Tôi đã nhận xét về câu trả lời của ConroyP, nhưng điều đó đòi hỏi 50 danh tiếng mà tôi không có. Tôi có đủ danh tiếng để gửi câu trả lời khác. Lấy làm tiếc.

Vấn đề với câu trả lời của ConroyP là hộp kiểm được hiển thị không thể thay đổi bằng cách thậm chí không bao gồm nó trên trang. Mặc dù Electrons_Ahoy không quy định nhiều như vậy, nhưng câu trả lời tốt nhất sẽ là một trong đó hộp kiểm không thể thay đổi sẽ trông giống nhau, nếu không giống như hộp kiểm có thể thay đổi, như trường hợp khi thuộc tính "bị vô hiệu hóa" được áp dụng. Một giải pháp giải quyết hai lý do Electrons_Ahoy đưa ra cho việc không muốn sử dụng thuộc tính "bị vô hiệu hóa" sẽ không nhất thiết là không hợp lệ vì nó sử dụng thuộc tính "bị vô hiệu hóa".

Giả sử hai biến boolean, $ đã kiểm tra và $ bị vô hiệu hóa:

if ($checked && $disabled)
    echo '<input type="hidden" name="my_name" value="1" />';
echo '<input type="checkbox" name="my_name" value="1" ',
    $checked ? 'checked="checked" ' : '',
    $disabled ? 'disabled="disabled" ' : '', '/>';

Hộp kiểm được hiển thị dưới dạng đã chọn nếu $ check là đúng. Hộp kiểm được hiển thị là không được chọn nếu $ check là sai. Người dùng có thể thay đổi trạng thái của hộp kiểm nếu và chỉ khi $ bị vô hiệu hóa là sai. Tham số "my_name" không được đăng khi hộp kiểm không được chọn, bởi người dùng hay không. Tham số "my_name = 1" được đăng khi hộp kiểm được chọn, bởi người dùng hay không. Tôi tin rằng đây là những gì Electrons_Ahoy đang tìm kiếm.

Không, các hộp kiểm đầu vào không thể được đọc.

Nhưng bạn có thể làm cho chúng chỉ đọc bằng javascript!

Thêm mã này bất cứ nơi nào bất cứ lúc nào để làm cho các hộp kiểm chỉ hoạt động như giả định, bằng cách ngăn người dùng sửa đổi nó theo bất kỳ cách nào.

jQuery(document).on('click', function(e){
      // check for type, avoid selecting the element for performance
      if(e.target.type == 'checkbox') {
          var el = jQuery(e.target);
          if(el.prop('readonly')) {
              // prevent it from changing state
              e.preventDefault();
          }
      }
});

input[type=checkbox][readonly] {
    cursor: not-allowed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>

Bạn có thể thêm tập lệnh này bất cứ lúc nào sau khi jQuery đã tải.

Nó sẽ làm việc cho các yếu tố được thêm động.

Nó hoạt động bằng cách chọn sự kiện nhấp (xảy ra trước sự kiện thay đổi) trên bất kỳ phần tử nào trên trang, sau đó kiểm tra xem phần tử này có phải là hộp kiểm chỉ đọc hay không và nếu có thì nó sẽ chặn thay đổi.

Có rất nhiều if để làm cho nó không ảnh hưởng đến hiệu suất của trang.

Chỉ cần sử dụng thẻ vô hiệu hóa đơn giản như thế này dưới đây.

<input type="checkbox" name="email"  disabled>

một ý tưởng khác là sử dụng lớp phủ và che đậy chỉ đọc của bạn đầu vào

http://pure-essence.net/2011/09/22/jquery-read-only-elements/

Nếu bạn muốn TẤT CẢ các hộp kiểm của mình bị "khóa" để người dùng không thể thay đổi trạng thái "đã kiểm tra" nếu có chứng nhận "chỉ đọc", thì bạn có thể sử dụng jQuery:

$(':checkbox').click(function () {
    if (typeof ($(this).attr('readonly')) != "undefined") {
        return false;
    }
});

Điều thú vị về mã này là nó cho phép bạn thay đổi thuộc tính "chỉ đọc" trên toàn bộ mã của bạn mà không phải buộc lại mỗi hộp kiểm.

Nó hoạt động cho các nút radio là tốt.

Lý do chính khiến mọi người muốn có một hộp kiểm chỉ đọc và (cũng như) một nhóm radio chỉ đọc là để thông tin không thể thay đổi có thể được gửi lại cho người dùng ở dạng đã nhập.

OK bị vô hiệu hóa sẽ làm điều này - không may điều khiển bị vô hiệu hóa không thể điều hướng bằng bàn phím và do đó không tuân theo tất cả các luật về khả năng truy cập. Đây là hangout LỚN NHẤT trong HTML mà tôi biết.

Đóng góp rất rất muộn ... nhưng dù sao đi nữa. Khi tải trang, sử dụng jquery để vô hiệu hóa tất cả các hộp kiểm trừ cái được chọn hiện tại. Sau đó, đặt cái hiện được chọn là chỉ đọc để nó có giao diện tương tự như cái bị vô hiệu hóa. Người dùng không thể thay đổi giá trị và giá trị được chọn vẫn gửi.

Đến bữa tiệc rất muộn nhưng tôi đã tìm thấy câu trả lời cho MVC (5) Tôi đã vô hiệu hóa CheckBox và thêm HiddenFor TRƯỚC hộp kiểm, vì vậy khi nó đăng bài nếu tìm thấy trường Ẩn trước và sử dụng giá trị đó. Điều này không hoạt động.

 <div class="form-group">
     @Html.LabelFor(model => model.Carrier.Exists, new { @class = "control-label col-md-2" })
         <div class="col-md-10">
              @Html.HiddenFor(model => model.Carrier.Exists)
              @Html.CheckBoxFor(model => model.Carrier.Exists, new { @disabled = "disabled" })
              @Html.ValidationMessageFor(model => model.Carrier.Exists)
          </div>
 </div>

Tôi sẽ sử dụng thuộc tính chỉ đọc

<input type="checkbox" readonly>

Sau đó sử dụng CSS để vô hiệu hóa các tương tác:

input[type='checkbox'][readonly]{
    pointer-events: none;
}

Lưu ý rằng sử dụng lớp giả: chỉ đọc không hoạt động ở đây.

input[type='checkbox']:read-only{ /*not working*/
    pointer-events: none;
}

Tôi chỉ không muốn khách hàng có thể thay đổi chúng trong những trường hợp nhất định.

SYN SÀNG chính nó sẽ không làm việc. Bạn có thể làm một cái gì đó thú vị với w / CSS nhưng chúng tôi thường chỉ làm cho chúng bị vô hiệu hóa.

CẢNH BÁO: Nếu chúng được đăng lại thì khách hàng có thể thay đổi chúng, định kỳ. Bạn không thể dựa vào chỉ đọc để ngăn người dùng thay đổi thứ gì đó. Luôn luôn có thể sử dụng fiddler hoặc chỉ chane html w / fireorms hoặc một số thứ như vậy.

Giải pháp của tôi thực sự trái ngược với giải pháp của FlySwat, nhưng tôi không chắc liệu nó có hiệu quả với tình huống của bạn không. Tôi có một nhóm các hộp kiểm và mỗi hộp có trình xử lý onClick gửi biểu mẫu (chúng được sử dụng để thay đổi cài đặt bộ lọc cho bảng). Tôi không muốn cho phép nhiều lần nhấp, vì các lần nhấp tiếp theo sau lần nhấp đầu tiên bị bỏ qua. Vì vậy, tôi vô hiệu hóa tất cả các hộp kiểm sau lần nhấp đầu tiên và sau khi gửi biểu mẫu:

onclick="document.forms['form1'].submit(); $('#filters input').each(function() {this.disabled = true});"

Các hộp kiểm nằm trong phần tử span có ID "bộ lọc" - phần thứ hai của mã là một câu lệnh jQuery lặp lại qua các hộp kiểm và vô hiệu hóa từng bộ lọc. Bằng cách này, các giá trị hộp kiểm vẫn được gửi qua biểu mẫu (vì biểu mẫu đã được gửi trước khi vô hiệu hóa chúng) và nó ngăn người dùng thay đổi chúng cho đến khi trang tải lại.