Chcę wyłączyć mój element wejściowy div, stosując moją klasę CSS CSS. Ale nie mogłem znaleźć atrybutu CSS, który może wyłączyć element wejściowy. Obecnie co robię

  $('#div_sercvice_detail :input').attr('disabled', true);
 $('#retention_interval_div :input').addClass("disabled"); 

Który może wyłączyć cały element wejściowy div z CSS attr, ale chcę zastosować moją niestandardową klasę dla wyłączenia wszystkich wejść za pomocą dodatkowych atrybutów CSS

 $('#retention_interval_div :input').addClass("disabled");

Klasa

.disabled{
color : darkGray;
font-style: italic;
/*property for disable input element like*/
/*disabled:true; */
}    

Wszelkie sugestie dotyczące tego z jQuery bez użycia .attr ("wyłączone", prawda);?

6
Ashish Panery 8 sierpień 2012, 15:25

6 odpowiedzi

Najlepsza odpowiedź

Nie ma sposobu na wyłączenie elementu z tylko CSS, ale możesz utworzyć styl, który zostanie zastosowany do elementów niepełnosprawnych:

<style>
#retention_interval_div​​ input[type="text"]:disabled { 
    color : darkGray;
    font-style: italic;
}​
</style>

Następnie w swoim kodzie tylko musisz powiedzieć:

 $('#retention_interval_div :input').prop("disabled", true);

DEMO: http://jsfiddle.net/nnnnnn/dhgmq/

(Oczywiście selektor CSS :disabled nie jest obsługiwany w starych przeglądarkach.)

Należy pamiętać, że jeśli używasz wersji jQuery i = 1,6, należy użyć .prop() zamiast .attr(), aby zmienić stan wyłączenia.

Kod, który pokazałeś, nie wyłączy tego samego elementów, które stosuje klasę do - selektory są różne. Jeśli to tylko literówka, możesz uprościć go do jednej linii:

$('#retention_interval_div :input').addClass("disabled").attr('disabled', true);
10
nnnnnn 8 sierpień 2012, 11:39

Nr CSS nie może wyłączyć elementu wejściowego. CSS służy do stylizacji, nie może nic innego. Również wejście będzie działać tylko z wejściem, nie zapomnij Wybierz, Textlai, Hasło

2
Gareth Parker 8 sierpień 2012, 11:32

Możesz użyć następujących CSS, aby praktycznie wyłączyć wejście:

pointer-events: none;
2
Mohammad Usman 30 marzec 2018, 07:24

Musisz zrobić 2 rzeczy, więc dlaczego nie owinąć ich w jednej funkcji? Możesz nawet stworzyć małą wtyczkę, aby to zrobić:

(function ($) {
    $.fn.disableInput = function () {
        return this.each(function(){
            $(this).prop('disabled');
            $(this).addClass('disabled', true);            
        });

    }
})(jQuery);

Wtedy możesz to nazwać tak:

$('#myInput').disableInput();

... a nawet łańcuchuj go z innymi rzeczami, taką:

$('#myInput').disableInput().addClass('otherClass');​
1
Faust 8 sierpień 2012, 11:45

Przy użyciu normalnych CSS.

.disabled{
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
1
Yallaling Goudar 14 listopad 2019, 08:57

Nie można wyłączyć elementów wejściowych za pomocą właściwości CSS. Ale możesz poprawić swoje bieżące kodowanie jak następujące

 $('#div_sercvice_detail :input').prop('disabled',true).addClass("disabled");
0
Nick 8 sierpień 2012, 11:36