cara POST / Kirim Kotak centang Input yang dinonaktifkan?


130

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?


Saya pikir solusi ini juga membantu di sini: stackoverflow.com/questions/12769664/…
Sergej Fomin

Saya pikir solusi ini juga membantu di sini: stackoverflow.com/questions/12769664/…
Sergej Fomin

Jawaban:


106

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


7
Untuk menjadikannya HTML yang valid, tetapkan nilai readonly menjadi readonly secara khusus, yaitu:<input name="foo" value="bar" readonly="readonly" />
Matt Huggins

5
Untuk mendapatkan bidang input "readonly" ke LOOK seperti bidang "nonaktif", setel 'style = "color: grey; background-color: # F0F0F0;"'.
Dan Nissenbaum

3
@MattHuggins Menetapkan nilai hanya untuk atribut-nama-atribut seperti diperiksa, hanya baca dll ... dan end slash pada atribut non-pasangan tidak ada hubungannya dengan validitas HTML - ini diperlukan untuk validitas XHTML ...
jave.web

Btw: Mungkin tersandung seseorang tentang ini: JANGAN GUNAKANNYA untuk input type = tombol, mereka tidak akan "dinonaktifkan", gunakan "dinonaktifkan = 'dinonaktifkan'"
Meister Schnitzel

2
readonlytidak akan berfungsi karena Anda tidak akan dapat memposting nilai kotak centang dengan tag tersebut, gunakan disabledbersama dengan elemen input tersembunyi untuk menyimpan nilai kotak centang, lihat caranya: stackoverflow.com/a/8274787/448816
mikhail-t

91

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


di sini harus ada id yang sama untuk input tersembunyi dan kotak centang?
user2167382

tidak, id dapat berupa apa saja, tetapi 'nama' dan 'nilai' harus sama.
mikhail-t

Seberapa andalkah ini di berbagai browser?
Tim

ini telah diuji dan bekerja dengan baik di Chrome, Firefox, dan IE 11 terbaru, berikut ini adalah implementasinya, cobalah di browser Anda: mvccbl.com/…
mikhail-t

74

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

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

Apakah ini akan membuat kontrol "diaktifkan" di UI?
anar khalilov

Ini menghapus atribut yang dinonaktifkan jadi secara teori ya. Dalam praktiknya saya tidak berpikir pengguna dapat mengubah bidang melalui UI antara ini terjadi dan formulir yang diajukan ... Saya akan tertarik untuk mengetahui dengan pasti.
Tristan Channing

Agak lama, tetapi sebagai sidenote: Jika Anda menggunakan <select>atau <textfield>atau elemen HTML lain yang mendukung disabledatribut, Anda dapat memilihnya dan mengaktifkan semuanya dengan: $( "*:disabled" ).removeAttr("disabled");
Gusstavv Gil

10

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.


5
Tidakkah Anda hanya membencinya ketika Anda menulis beberapa solusi rumit untuk masalah dan kemudian ketika Anda menyegarkan, seseorang (seperti Francesco) pergi dan menulis satu kalimat sederhana? ;)
jessegavin

Ini sempurna untuk apa yang ingin saya capai, saya ingin kotak centang yang tidak dicentang mengirimkan nilai alih-alih tidak, terima kasih: D.
Geoffrey

@jessegavin Mengingat 'liner sederhana' nya tidak lagi berfungsi dan dia memperbarui jawabannya untuk memasukkannya, tidak, saya tidak bisa mengatakan itu.
RyanfaeScotland

8
<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 !.


ini hanya akan menduplikasi apa yang sudah dilakukan kotak centang, tetapi jika telah dinonaktifkan oleh javascript atau apa pun itu masih akan dinonaktifkan, bisakah Anda menjelaskan sedikit lebih banyak tentang apa yang Anda tuju, mungkin saya salah mengerti karena hanya sebaris kode
ScottC

8

buat kelas css misalnya:

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

terapkan kelas ini sebagai ganti atribut yang dinonaktifkan


7

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/


4

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

});

3

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

Terima kasih untuk ini! Entah mengapa, input "tersembunyi" tidak berfungsi untuk saya. Ini menyelamatkan saya. Peretasan yang sangat bagus!
NewbieProgrammer

3

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.


1

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

1

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


1

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

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


0

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

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

0

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

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

0

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.


0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.