nonaktifkan semua elemen bentuk di dalam div


161

apakah ada cara untuk menonaktifkan semua bidang (textarea / textfield / option / input / checkbox / submit dll) dalam formulir dengan mengatakan hanya nama div induk di jquery / javascript?


4
Perhatikan bahwa dengan melakukan ini, Anda menyebabkan nilai elemen-elemen itu "menghilang" ketika mengirimkan formulir - untuk mempertahankan nilai membuatnya readOnly, bukan dinonaktifkan.
Shadow Wizard adalah Ear For You


1
Sebuah Ide dapat berupa sembunyikan / tampilkan div di depan kontrol yang diizinkan / dicegah diklik, plus kontrol gaya nonaktif dengan css.
Jaider

Jawaban:


261

Coba gunakan :inputpemilih, bersama dengan pemilih induk:

$("#parent-selector :input").attr("disabled", true);

dapatkah saya menggunakan ini untuk mengatur semua input di dalam div ke nilai 0?
jackson5

2
Saya ingin menonaktifkan <a> juga ... <a> saya juga memiliki klik
RAJ

7
Mengutip jQuery : Karena: input adalah ekstensi jQuery dan bukan bagian dari spesifikasi CSS, permintaan menggunakan: input tidak dapat memanfaatkan peningkatan kinerja yang disediakan oleh metode DOM querySelectorAll () asli. Untuk mencapai kinerja terbaik saat menggunakan: input untuk memilih elemen, pertama pilih elemen menggunakan pemilih CSS murni, kemudian gunakan .filter (": input").
acme

2
@acme: Setuju 100% tetapi pertanyaannya tidak memberikan petunjuk apa pun untuk pemilih yang bisa saya filter. Satu-satunya informasi yang diberikan kepada saya adalah bahwa pengguna harus dapat melakukannya dengan nama indukdiv dan hanya itu. Jika diberi informasi lebih lanjut, saya bisa mendapatkan solusi yang lebih efisien.
Andrew Whitaker

1
Gunakan .prop () alih-alih .attr () (di atas jquery 1.6)
Akshay Gundewar

154
$('#mydiv').find('input, textarea, button, select').attr('disabled','disabled');

4
seharusnya ('input, textarea, button') semua penyeleksi harus dikutip dengan satu set kutipan. api.jquery.com/multiple-selector Melakukannya dengan cara Anda mengirim banyak argumen.
Ivan Ivanić

2
Ini hanya akan menemukan Anda input, mengabaikan area dan tombol teks. Selector input adalah cara untuk melakukannya, tetapi jika Anda ingin membuat daftar secara eksplisit, Anda harus menggunakannya $('#mydiv').find('input, textarea, button').
Mark Hildreth

1
... atau hanya $ ('# formulir Anda'). children (). prop ('dinonaktifkan', true);
walv

@walv kode Anda hanya berfungsi jika semua elemen formulir merupakan turunan tunggal dari formulir. Find () menemukan semua elemen dalam daftar terlepas dari level turunan. Baris kode ini benar selain menggunakan prop bukan attr untuk versi jquery baru.
Chris O

32

Untuk jquery 1.6+, gunakan .prop()sebagai ganti .attr(),

$("#parent-selector :input").prop("disabled", true);

atau

$("#parent-selector :input").attr("disabled", "disabled");

2
Anda benar tetapi beberapa waktu menopang kerja dan beberapa waktu tidak bekerja, khususnya karena kotak centang dan radiobutton
damon

saya menyadari bahwa ini adalah utas lama, tetapi ini menendang beberapa kesalahan saat menggunakan naskah
Simon Price

5
    $(document).ready(function () {
        $('#chkDisableEnableElements').change(function () {
            if ($('#chkDisableEnableElements').is(':checked')) {
                enableElements($('#divDifferentElements').children());
            }
            else {
                disableElements($('#divDifferentElements').children());
            }
        });
    });

    function disableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = true;

            disableElements(el[i].children);
        }
    }

    function enableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = false;

            enableElements(el[i].children);
        }
    }

4

Sederhananya baris kode ini akan menonaktifkan semua elemen input

$('#yourdiv *').prop('disabled', true);

jawaban terbaik dari pendapat saya.
Ajay2707

2

Bagaimana dengan mencapai ini hanya menggunakan atribut HTML 'dinonaktifkan'

<form>
 <fieldset disabled>
  <div class="row">
   <input type="text" placeholder="">
   <textarea></textarea>
   <select></select>
  </div>
  <div class="pull-right">
    <button class="button-primary btn-sm" type="submit">Submit</button>
  </div>
 </fieldset>
</form>

Hanya dengan menonaktifkannya di set field, semua bidang di dalam setset tersebut akan dinonaktifkan.

$('fieldset').attr('disabled', 'disabled');

1

Saya menggunakan fungsi di bawah ini di berbagai titik. Bekerja dalam elemen div atau tombol dalam sebuah tabel selama pemilih kanan digunakan. Hanya ": tombol" tidak akan mengaktifkan kembali untuk saya.

function ToggleMenuButtons(bActivate) {
    if (bActivate == true) {
        $("#SelectorId :input[type='button']").prop("disabled", true);
    } else {
        $("#SelectorId :input[type='button']").removeProp("disabled");
    }
}

solusi dua dalam satu yang bagus.
3 aturan

0

Mengikuti akan menonaktifkan semua input tetapi tidak akan mampu untuk btn kelas dan juga menambahkan kelas untuk menimpa menonaktifkan css.

$('#EditForm :input').not('.btn').attr("disabled", true).addClass('disabledClass');

kelas css

.disabledClass{
  background-color: rgb(235, 235, 228) !important;
}

0

Bagi saya jawaban yang diterima tidak berfungsi karena saya memiliki beberapa bidang tersembunyi asp net yang dinonaktifkan juga jadi saya memilih hanya untuk menonaktifkan bidang yang terlihat

//just to save the list so we can enable fields later
var list = [];
$('#parent-selector').find(':input:visible:not([readonly][disabled]),button').each(function () {
    list.push('#' + this.id);
});

$(list.join(',')).attr('readonly', true);

0

Gunakan Kelas CSS untuk mencegah dari Mengedit Elemen Div

CSS:

.divoverlay
{
position:absolute;
width:100%;
height:100%;
background-color:transparent;
z-index:1;
top:0;
}

JS:

$('#divName').append('<div class=divoverlay></div>');

Atau tambahkan nama kelas dalam Tag HTML. Ini akan mencegah dari mengedit Elemen Div.


0

Hanya tipe teks

$(".form-edit-account :input[type=text]").attr("disabled", "disabled");

Hanya tipe kata sandi

$(".form-edit-account :input[type=password]").attr("disabled", "disabled");

Hanya Jenis Email

$(".form-edit-account :input[type=email]").attr("disabled", "disabled");
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.