cara POST / Kirim Kotak centang Input yang dinonaktifkan?

Saya memiliki kotak centang yang, dengan ketentuan tertentu, perlu dinonaktifkan. Ternyata HTTP tidak memposting input yang dinonaktifkan.

Bagaimana saya bisa mengatasi itu? mengirimkan input bahkan jika itu dinonaktifkan dan membuat input tetap dinonaktifkan?

PEMBARUAN : READONLYtidak berfungsi pada kotak centang

Anda bisa menggunakan disabled="disabled"tetapi pada titik ini nilai kotak centang tidak akan muncul ke dalam POSTnilai. Salah satu strateginya adalah menambahkan bidang tersembunyi yang menahan nilai kotak centang dalam formulir yang sama dan membaca kembali nilai dari bidang itu

Cukup ubah disabledkereadonly

Saya sudah memecahkan masalah itu.

Karena readonly="readonly"tag tidak berfungsi (saya sudah mencoba berbagai browser), Anda harus menggunakannya disabled="disabled" . Tetapi nilai kotak centang Anda tidak akan dikirim maka ...

Ini solusinya:

Untuk mendapatkan tampilan "hanya baca" dan nilai kotak centang POST dalam waktu bersamaan, tambahkan saja "input" tersembunyi dengan nama dan nilai yang sama dengan kotak centang Anda . Anda harus menyimpannya di sebelah kotak centang atau di antara <form></form>tag yang sama :

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

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

Juga, biarkan kamu tahu readonly="readonly", readonly="true", readonly="",atau tidak READONLYakan menyelesaikan ini! Saya telah menghabiskan beberapa jam untuk mencari tahu!

Referensi ini juga TIDAK relevan (mungkin belum, atau tidak lagi, saya tidak tahu): http://www.w3schools.com/tags/att_input_readonly.asp

Jika Anda senang menggunakan JQuery maka hapus atribut yang dinonaktifkan saat mengirimkan formulir:

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

Anda bisa mengatasinya dengan cara ini ... Untuk setiap kotak centang, buat bidang tersembunyi dengan nameatribut yang sama . Tetapi atur nilai bidang tersembunyi itu dengan beberapa nilai default yang bisa Anda uji. Sebagai contoh..

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

Jika kotak centang "dicentang" ketika formulir dikirimkan, maka nilai parameter formulir itu akan menjadi

"agree,false"

Jika kotak centang tidak dicentang, maka nilainya akan menjadi

"false"

Anda bisa menggunakan nilai apa pun alih-alih "salah", tetapi Anda mendapatkan idenya.

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

Saya mulai dari masalah: "bagaimana POST / Kirim Kotak centang Input yang dinonaktifkan?" dan dalam jawaban saya, saya melewatkan komentar: "Jika kita ingin menonaktifkan kotak centang kita pasti perlu menyimpan nilai awalan (dicentang atau tidak dicentang) dan juga kita ingin agar pengguna menyadarinya (kalau tidak kita harus menggunakan jenis tersembunyi dan bukan kotak centang) ". Dalam jawaban saya, saya mengira kami ingin selalu mencentang kotak dan kode itu bekerja dengan cara ini. Jika kita mengklik ckeckbox itu akan selamanya dicentang dan nilainya akan POSTED / Diserahkan! Dengan cara yang sama jika saya menulis onclick = "this.checked = false" tanpa dicentang = "dicentang" (catatan: default tidak dicentang) selamanya akan dicentang dan nilainya tidak akan POSTED / Dikirim !.

buat kelas css misalnya:

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

terapkan kelas ini sebagai ganti atribut yang dinonaktifkan

Cara paling sederhana untuk ini adalah:

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

Ini akan mencegah pengguna untuk tidak memilih kotak centang ini dan itu masih akan mengirimkan nilainya ketika formulir dikirimkan. Hapus dicentang jika Anda ingin pengguna tidak dapat memilih kotak centang ini.

Selain itu, Anda kemudian dapat menggunakan javascript untuk menghapus onclick setelah kondisi tertentu terpenuhi (jika itu yang Anda cari). Berikut ini biola yang menunjukkan apa yang saya maksud. Itu tidak sempurna, tetapi Anda mendapatkan intinya.

http://jsfiddle.net/vwUUc/

Ini berfungsi seperti pesona:

1. Hapus atribut "dinonaktifkan"
2. Kirimkan formulir
3. Tambahkan atribut lagi. Cara terbaik untuk melakukan ini adalah dengan menggunakan fungsi setTimeOut , misalnya dengan penundaan 1 milidetik.

Satu-satunya kelemahan adalah mem-flash pendek bidang input yang dinonaktifkan saat mengirimkan. Setidaknya dalam skenario saya itu bukan masalah besar!

$('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);

});

Jangan nonaktifkan itu; alih-alih mengaturnya menjadi hanya baca, meskipun ini tidak memiliki efek karena tidak memungkinkan pengguna untuk mengubah status. Tetapi Anda dapat menggunakan jQuery untuk memberlakukan ini (mencegah pengguna mengubah kondisi kotak centang:

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

Ini mengasumsikan bahwa semua kotak centang yang tidak ingin Anda modifikasi memiliki atribut "readonly". misalnya.

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

Sejak:

• mengatur atribut readonly to checkbox tidak valid sesuai dengan spesifikasi HTML,
• menggunakan elemen tersembunyi untuk mengirimkan nilai bukan cara yang sangat cantik dan
• pengaturan onclick JavaScript yang mencegah perubahan nilai juga tidak terlalu bagus

Saya akan menawarkan Anda kemungkinan lain:

Tetapkan kotak centang Anda sebagai dinonaktifkan seperti biasa. Dan sebelum formulir dikirimkan oleh pengguna, aktifkan kotak centang ini oleh 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>

Karena kotak centang diaktifkan sebelum formulir dikirimkan, nilainya diposting dengan cara yang sama. Satu-satunya hal yang tidak terlalu menyenangkan tentang solusi ini adalah bahwa kotak centang ini menjadi diaktifkan untuk sementara waktu dan yang dapat dilihat oleh pengguna. Tapi itu hanya detail yang bisa saya jalani.

Sayangnya tidak ada solusi 'sederhana'. Atribut readonly tidak dapat diterapkan ke kotak centang. Saya membaca spesifikasi W3 tentang kotak centang dan menemukan pelakunya:

Jika kontrol tidak memiliki nilai saat ini ketika formulir dikirimkan, agen pengguna tidak diharuskan untuk memperlakukannya sebagai kontrol yang berhasil. ( http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2 )

Ini menyebabkan keadaan tidak dicentang dan keadaan dinonaktifkan menghasilkan nilai parsing yang sama.

• readonly = "readonly" bukan atribut yang valid untuk kotak centang.
• onclick = "event.preventDefault ();" tidak selalu merupakan solusi yang baik karena dipicu pada kotak centang itu sendiri. Tapi itu bisa bekerja pesona di beberapa kesempatan.
• Mengaktifkan kotak centang diSubmit bukan solusi karena kontrol masih tidak diperlakukan sebagai kontrol yang sukses sehingga nilainya tidak akan diuraikan.
• Menambahkan input tersembunyi lain dengan nama yang sama di HTML Anda tidak berfungsi karena nilai kontrol pertama ditimpa oleh nilai kontrol kedua karena memiliki nama yang sama.

Satu-satunya cara penuh-bukti untuk melakukan ini adalah menambahkan input tersembunyi dengan nama yang sama dengan javascript saat mengirimkan formulir .

Anda dapat menggunakan potongan kecil yang saya buat untuk ini:

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);
    }
  }
}

Ini mencari formulir pertama dalam dokumen, mengumpulkan semua input dan mencari input yang dinonaktifkan. Ketika input yang dinonaktifkan ditemukan, input tersembunyi dibuat di parentNode dengan nama yang sama dan nilai 'on' (jika statusnya 'dicentang') dan '' (jika statusnya adalah '' - tidak dicentang).

Fungsi ini harus dipicu oleh acara 'kirim' di elemen FORM sebagai:

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

Tambahkan onsubmit="this['*nameofyourcheckbox*'].disabled=false"ke formulir.

Tidak ada pilihan lain selain hiddenbidang, jadi coba gunakan hiddenbidang seperti yang ditunjukkan pada kode di bawah ini:

<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>

Function some_name adalah contoh klausa sebelumnya untuk mengelola kotak centang kedua yang dicentang (memposting nilainya) atau tidak dicentang (tidak memposting nilainya) sesuai dengan klausa dan pengguna tidak dapat mengubah statusnya; tidak perlu mengelola semua penonaktifan kotak centang kedua

Anda dapat tetap menonaktifkannya seperti yang diinginkan, dan kemudian menghapus atribut yang dinonaktifkan sebelum formulir dikirimkan.

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

Menambah onclick="this.checked=true"Selesaikan masalah saya:
Contoh:

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

Berikut ini pekerjaan lain yang bisa dikontrol dari backend.

ASPX

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

Di ASPX.CS

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

Kelas hanya ditambahkan untuk keperluan gaya.

Saya baru saja menggabungkan saran HTML, JS dan CSS dalam jawaban di sini

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;
}

Karena elemen ini tidak 'dinonaktifkan', ia masih melewati POST.