Làm thế nào để POST / Gửi một hộp kiểm đầu vào bị vô hiệu hóa?

Tôi có một hộp kiểm, với những điều kiện nhất định, cần phải bị vô hiệu hóa. Hóa ra HTTP không đăng các đầu vào bị vô hiệu hóa.

Làm thế nào tôi có thể nhận được xung quanh đó? gửi đầu vào ngay cả khi nó bị vô hiệu hóa và giữ đầu vào bị vô hiệu hóa?

CẬP NHẬT : READONLYkhông hoạt động trên các hộp kiểm

Bạn có thể sử dụng disabled="disabled"nhưng tại thời điểm này, giá trị của hộp kiểm sẽ không xuất hiện thành POSTcác giá trị. Một trong những chiến lược là thêm giá trị của hộp kiểm giữ trường ẩn trong cùng một biểu mẫu và đọc lại giá trị từ trường đó

Đơn giản chỉ cần thay đổi disabledthànhreadonly

Tôi đã giải quyết vấn đề đó.

Vì readonly="readonly"thẻ không hoạt động (tôi đã thử các trình duyệt khác nhau), nên bạn phải sử dụng disabled="disabled" thay thế. Nhưng giá trị hộp kiểm của bạn sẽ không được đăng sau đó ...

Đây là giải pháp của tôi:

Để có được giao diện "chỉ đọc" và giá trị của hộp kiểm POST cùng một lúc, chỉ cần thêm một "đầu vào" ẩn có cùng tên và giá trị với hộp kiểm của bạn . Bạn phải giữ nó bên cạnh hộp kiểm của bạn hoặc giữa các <form></form>thẻ giống nhau :

<input type="checkbox" checked="checked" disabled="disabled" name="Tests" value="4">SOME TEXT</input>

<input type="hidden" id="Tests" name="Tests" value="4" />

Ngoài ra, chỉ để cho bạn biết readonly="readonly", readonly="true", readonly="",hoặc READONLYsẽ KHÔNG giải quyết điều này! Tôi đã dành vài giờ để tìm ra nó!

Tài liệu tham khảo này cũng KHÔNG liên quan (có thể chưa hoặc không còn nữa, tôi không biết): http://www.w3schools.com/tags/att_input_readonly.asp

Nếu bạn hài lòng khi sử dụng JQuery thì hãy xóa thuộc tính bị vô hiệu hóa khi gửi biểu mẫu:

$("form").submit(function() {
    $("input").removeAttr("disabled");
});

Bạn có thể xử lý theo cách này ... Đối với mỗi hộp kiểm, hãy tạo một trường ẩn có cùng namethuộc tính. Nhưng đặt giá trị của trường ẩn đó với một số giá trị mặc định mà bạn có thể kiểm tra. Ví dụ..

<input type="checkbox" name="myCheckbox" value="agree" />
<input type="hidden" name="myCheckbox" value="false" />

Nếu hộp kiểm được "chọn" khi biểu mẫu được gửi, thì giá trị của tham số biểu mẫu đó sẽ là

"agree,false"

Nếu hộp kiểm không được chọn, thì giá trị sẽ là

"false"

Bạn có thể sử dụng bất kỳ giá trị nào thay vì "sai", nhưng bạn có ý tưởng.

<input type="checkbox" checked="checked" onclick="this.checked=true" />

Tôi bắt đầu từ vấn đề: "làm thế nào để POST / Gửi hộp kiểm đầu vào bị vô hiệu hóa?" và trong câu trả lời của tôi, tôi đã bỏ qua bình luận: "Nếu chúng tôi muốn vô hiệu hóa hộp kiểm, chúng tôi chắc chắn cần phải giữ một giá trị tiền tố (được chọn hoặc không được kiểm tra) và chúng tôi cũng muốn người dùng biết về nó (nếu không chúng tôi nên sử dụng loại ẩn và không phải là một hộp kiểm) ". Trong câu trả lời của tôi, tôi cho rằng chúng tôi muốn luôn kiểm tra hộp kiểm và mã đó hoạt động theo cách này. Nếu chúng ta nhấp vào ckeckbox đó, nó sẽ được kiểm tra mãi mãi và giá trị của nó sẽ được POST / Gửi! Theo cách tương tự nếu tôi viết onclick = "this.checked = false" mà không được kiểm tra = "đã kiểm tra" (lưu ý: mặc định là không được chọn), nó sẽ mãi mãi không được kiểm tra và giá trị của nó sẽ không được POST / Gửi!.

tạo một lớp css, vd:

.disable{
        pointer-events: none;
        opacity: 0.5;
}

áp dụng lớp này thay vì thuộc tính bị vô hiệu hóa

Cách đơn giản nhất để làm điều này là:

<input type="checkbox" class="special" onclick="event.preventDefault();" checked />

Điều này sẽ ngăn người dùng không thể bỏ chọn hộp kiểm này và nó vẫn sẽ gửi giá trị của nó khi biểu mẫu được gửi. Xóa chọn nếu bạn muốn người dùng không thể chọn hộp kiểm này.

Ngoài ra, sau đó bạn có thể sử dụng javascript để xóa onclick sau khi một điều kiện nhất định được đáp ứng (nếu đó là những gì bạn đang theo đuổi). Đây là một câu đố khó hiểu cho thấy ý tôi là gì. Nó không hoàn hảo, nhưng bạn có ý chính.

http://jsfiddle.net/vwUUc/

Công việc này như một cái duyên vậy:

1. Xóa các thuộc tính "bị vô hiệu hóa"
2. Gửi mẫu
3. Thêm các thuộc tính một lần nữa. Cách tốt nhất để làm điều này là sử dụng hàm setTimeOut , ví dụ với độ trễ 1 mili giây.

Nhược điểm duy nhất là nhấp nháy ngắn lên của các trường đầu vào bị vô hiệu hóa khi gửi. Ít nhất trong kịch bản của tôi đó không phải là vấn đề!

$('form').bind('submit', function () {
  var $inputs = $(this).find(':input'),
      disabledInputs = [],
      $curInput;

  // remove attributes
  for (var i = 0; i < $inputs.length; i++) {
    $curInput = $($inputs[i]);

    if ($curInput.attr('disabled') !== undefined) {
      $curInput.removeAttr('disabled');
      disabledInputs.push(true);
    } else 
      disabledInputs.push(false);
  }

  // add attributes
  setTimeout(function() {
    for (var i = 0; i < $inputs.length; i++) {

      if (disabledInputs[i] === true)
        $($inputs[i]).attr('disabled', true);

    }
  }, 1);

});

Đừng vô hiệu hóa nó; thay vào đó, đặt nó thành chỉ đọc, mặc dù điều này không có tác dụng vì không cho phép người dùng thay đổi trạng thái. Nhưng bạn có thể sử dụng jQuery để thực thi điều này (ngăn người dùng thay đổi trạng thái của hộp kiểm:

$('input[type="checkbox"][readonly="readonly"]').click(function(e){
    e.preventDefault();
});

Điều này giả định rằng tất cả các hộp kiểm bạn không muốn sửa đổi đều có thuộc tính "chỉ đọc". ví dụ.

<input type="checkbox" readonly="readonly">

Từ:

• thiết lập thuộc tính chỉ đọc thành hộp kiểm không hợp lệ theo đặc tả HTML,
• sử dụng yếu tố ẩn để gửi giá trị không phải là cách rất hay và
• cài đặt onclick JavaScript để ngăn thay đổi giá trị cũng không đẹp lắm

Tôi sẽ cung cấp cho bạn một khả năng khác:

Đặt hộp kiểm của bạn là vô hiệu hóa như bình thường. Và trước khi biểu mẫu được gửi bởi người dùng, hãy bật hộp kiểm này bằng JavaScript.

<script>
    function beforeSumbit() {
        var checkbox = document.getElementById('disabledCheckbox');
        checkbox.disabled = false;
    }
</script>
...
<form action="myAction.do" method="post" onSubmit="javascript: beforeSubmit();">
    <checkbox name="checkboxName" value="checkboxValue" disabled="disabled" id="disabledCheckbox" />
    <input type="submit />
</form>

Vì hộp kiểm được bật trước khi biểu mẫu được gửi, giá trị của nó được đăng theo cách phổ biến. Điều duy nhất không dễ chịu về giải pháp này là hộp kiểm này được bật trong một thời gian và người dùng có thể nhìn thấy. Nhưng đó chỉ là một chi tiết tôi có thể sống với.

Thật không may, không có giải pháp "đơn giản". Thuộc tính chỉ đọc không thể được áp dụng cho các hộp kiểm. Tôi đọc thông số W3 về hộp kiểm và tìm ra thủ phạm:

Nếu một điều khiển không có giá trị hiện tại khi biểu mẫu được gửi, tác nhân người dùng không bắt buộc phải coi đó là điều khiển thành công. ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

Điều này làm cho trạng thái không được kiểm tra và trạng thái bị vô hiệu hóa dẫn đến cùng một giá trị được phân tích cú pháp.

• readonly = "readonly" không phải là một thuộc tính hợp lệ cho các hộp kiểm.
• onclick = "event.preventDefault ();" không phải lúc nào cũng là một giải pháp tốt vì nó được kích hoạt trên chính hộp kiểm. Nhưng nó có thể làm việc quyến rũ trong một số dịp.
• Kích hoạt hộp kiểm trênSubmit không phải là một giải pháp vì điều khiển vẫn chưa được coi là điều khiển thành công nên giá trị sẽ không được phân tích cú pháp.
• Thêm một đầu vào ẩn khác có cùng tên trong HTML của bạn không hoạt động vì giá trị điều khiển đầu tiên được ghi đè bằng giá trị điều khiển thứ hai vì nó có cùng tên.

Cách duy nhất đầy đủ để làm điều này là thêm một đầu vào ẩn có cùng tên với javascript khi gửi biểu mẫu .

Bạn có thể sử dụng đoạn trích nhỏ tôi đã thực hiện cho việc này:

function disabled_checkbox() {
  var theform = document.forms[0];
  var theinputs = theform.getElementsByTagName('input');
  var nrofinputs = theinputs.length;
  for(var inputnr=0;inputnr<nrofinputs;inputnr++) {
    if(theinputs[inputnr].disabled==true) {
      var thevalueis = theinputs[inputnr].checked==true?"on":"";
      var thehiddeninput = document.createElement("input");
      thehiddeninput.setAttribute("type","hidden");
      thehiddeninput.setAttribute("name",theinputs[inputnr].name);
      thehiddeninput.setAttribute("value",thevalueis);
      theinputs[inputnr].parentNode.appendChild(thehiddeninput);
    }
  }
}

Cái này tìm mẫu đầu tiên trong tài liệu, tập hợp tất cả các đầu vào và tìm kiếm các đầu vào bị vô hiệu hóa. Khi tìm thấy đầu vào bị vô hiệu hóa, đầu vào ẩn được tạo trong ngoặc đơn có cùng tên và giá trị 'bật' (nếu trạng thái của nó là 'được kiểm tra') và '' (nếu trạng thái đó là '' - không được kiểm tra).

Chức năng này phải được kích hoạt bởi sự kiện 'onsubmit' trong phần tử FORM như:

<form id='ID' action='ACTION' onsubmit='disabled_checkbox();'>

Thêm onsubmit="this['*nameofyourcheckbox*'].disabled=false"vào mẫu.

Không có tùy chọn nào khác ngoài một hiddentrường, vì vậy hãy thử sử dụng một hiddentrường như được trình bày trong mã dưới đây:

<input type="hidden" type="text" name="chk1[]" id="tasks" value="xyz" >
<input class="display_checkbox" type="checkbox" name="chk1[]" id="tasks" value="xyz" checked="check"  disabled="disabled" >Tasks

<html>
    <head>
    <script type="text/javascript">
    function some_name() {if (document.getElementById('first').checked)      document.getElementById('second').checked=false; else document.getElementById('second').checked=true;} 
    </script>
    </head>
    <body onload="some_name();">
    <form>
    <input type="checkbox" id="first" value="first" onclick="some_name();"/>first<br/>
    <input type="checkbox" id="second" value="second" onclick="some_name();" />second
    </form>
    </body>
</html>

Hàm some_name là một ví dụ về mệnh đề trước để quản lý hộp kiểm thứ hai được chọn (đăng giá trị của nó) hoặc không được chọn (không đăng giá trị của nó) theo mệnh đề và người dùng không thể sửa đổi trạng thái của nó; không cần quản lý việc vô hiệu hóa hộp kiểm thứ hai

Bạn có thể giữ nó bị vô hiệu hóa như mong muốn, và sau đó xóa thuộc tính bị vô hiệu hóa trước khi biểu mẫu được gửi.

$('#myForm').submit(function() {
    $('checkbox').removeAttr('disabled');
});

Thêm onclick="this.checked=true"Giải quyết vấn đề của tôi:
Ví dụ:

<input type="checkbox" id="scales" name="feature[]" value="scales" checked="checked" onclick="this.checked=true" />

Đây là một công việc khác xung quanh có thể được kiểm soát từ phụ trợ.

ASPX

<asp:CheckBox ID="Parts_Return_Yes" runat="server" AutoPostBack="false" />

Trong ASPX.CS

Parts_Return_Yes.InputAttributes["disabled"] = "disabled";
Parts_Return_Yes.InputAttributes["class"] = "disabled-checkbox";

Lớp chỉ được thêm vào cho mục đích phong cách.

Tôi chỉ kết hợp các đề xuất HTML, JS và CSS trong các câu trả lời ở đây

HTML:

<input type="checkbox" readonly>

jQuery:

(function(){
    // Raj: https://stackoverflow.com/a/14753503/260665
    $(document).on('click', 'input[type="checkbox"][readonly]', function(e){
        e.preventDefault();
    });
})();

CSS:

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

Vì phần tử không bị 'vô hiệu hóa', nó vẫn đi qua POST.