wyłącz wszystkie elementy formularza wewnątrz div

161

czy istnieje sposób na wyłączenie wszystkich pól (pole tekstowe / pole tekstowe / opcja / wejście / pole wyboru / przesłać itp.) w formularzu, podając tylko nazwę nadrzędnego div w jquery / javascript?

— amirash
źródło

4

Zwróć uwagę, że w ten sposób spowodujesz, że wartości tych elementów „znikną” podczas przesyłania formularza - aby zachować wartość, wprowadź je readOnly, a nie wyłącz.

— Shadow Wizard is Ear For You

możliwy duplikat Jak wyłączyć całą zawartość div

— Michel Ayres

1

Pomysł może ukrywać / pokazywać element div przed elementami sterującymi, na które pozwala / zapobiega kliknięciu, oraz stylowo wyłączać elementy sterujące za pomocą CSS.

— Jaider

261

Spróbuj użyć :inputselektora wraz z selektorem nadrzędnym:

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

— Andrew Whitaker
źródło

czy mogę tego użyć, aby ustawić wszystkie dane wejściowe wewnątrz div na wartość 0?

— jackson 5

2

Chcę wyłączyć <a> także ... Mój <a> też ma onclick

— RAJ

7

Cytując jQuery : Ponieważ: input jest rozszerzeniem jQuery i nie jest częścią specyfikacji CSS, zapytania używające: input nie mogą korzystać ze zwiększenia wydajności zapewnianego przez natywną metodę DOM querySelectorAll (). Aby uzyskać najlepszą wydajność, używając: input do wybierania elementów, najpierw wybierz elementy za pomocą czystego selektora CSS, a następnie użyj .filter (": input").

— acme

2

@acme: Zgadzam się w 100%, ale pytanie nie daje żadnych wskazówek co do tego, według którego selektora mógłbym filtrować. Jedyną informacją, jaką otrzymałem, było to, że użytkownik musi mieć możliwość zrobienia tego z nazwą rodzicadiv i to wszystko. Gdybym miał więcej informacji, mógłbym wymyślić bardziej wydajne rozwiązanie.

— Andrew Whitaker,

1

Użyj .prop () zamiast .attr () (powyżej jquery 1.6)

— Akshay Gundewar

154

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

— Trevor
źródło

4

powinno być ('input, textarea, button'), wszystkie selektory powinny być cytowane z jednym zestawem cudzysłowów. api.jquery.com/multiple-selector Robiąc to po swojemu, wysyłasz wiele argumentów.

— Ivan Ivanić

2

Znajdzie to tylko dane wejściowe, ignorując obszary tekstowe i przyciski. Najlepszym rozwiązaniem jest selektor: input, ale jeśli chcesz je jawnie wymienić, musisz użyć $('#mydiv').find('input, textarea, button').

— Mark Hildreth

1

... lub po prostu $ ('# your-form'). children (). prop ('disabled', true);

— walv

@walv Twój kod działa tylko wtedy, gdy wszystkie elementy formularza są jednym potomkiem formularza. Funkcja Find () znajduje wszystkie elementy na liście niezależnie od poziomu podrzędnego. Ten wiersz kodu jest poprawny poza używaniem właściwości zamiast attr dla nowych wersji jquery.

— Chris O

32

W przypadku jquery 1.6+ użyj .prop()zamiast .attr(),

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

lub

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

— Optimus Prime
źródło

2

masz rację, ale jakiś czas działa rekwizyt, a jakiś czas nie działa, szczególnie z powodu pola wyboru i przycisku radiowego

— damon

zdaję sobie sprawę, że to stary wątek, ale powoduje to pewne błędy podczas używania maszynopisu

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

— Syed Nasir Abbas
źródło

4

Po prostu ta linia kodu wyłączy wszystkie elementy wejściowe

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

— Samir Rahimy
źródło

najlepsza odpowiedź z mojej opinii.

— Ajay2707

2

Co powiesz na osiągnięcie tego za pomocą tylko atrybutu HTML „wyłączony”

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

Po prostu ustawiając wyłączone w zestawie pól, wszystkie pola wewnątrz tego zestawu zostaną wyłączone.

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

— طلحة
źródło

1

Używam poniższej funkcji w różnych miejscach. Działa w elementach div lub button w tabeli, o ile używany jest prawy selektor. Po prostu „: przycisk” nie włączał się ponownie.

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

— AWizardInDallas
źródło

dwa w jednym rozwiązaniu super.

— 3 zasady

0

Następujące wyłączy wszystkie dane wejściowe, ale nie będzie w stanie ich do klasy btn, a także doda klasę, aby nadpisać wyłączone css.

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

klasa css

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

— Rohit Dubey
źródło

0

Dla mnie zaakceptowana odpowiedź nie zadziałała, ponieważ miałem kilka ukrytych pól asp net, które również zostały wyłączone, więc wybrałem tylko wyłączenie widocznych pól

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

— irfandar
źródło

0

Użyj klasy CSS, aby zapobiec edytowaniu elementów Div

CSS:

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

JS:

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

Lub dodaj nazwę klasy w tagu HTML. Uniemożliwi to edycję elementów Div.

— Laddu Vasanth
źródło

0

Tylko tekst

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

Tylko typ hasła

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

Tylko typ e-mail

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

— Manish
źródło