css-Schaltfläche auf nicht klickbar gesetzt

Lesezeit: 3 Minuten

Benutzer-Avatar
Stacktom

Ich möchte meine CSS-Schaltfläche auf nicht klickbar/deaktivieren setzen. Ich habe ein Formular, wenn ich danach auf die Schaltfläche “Senden” klicke, möchte ich diese Schaltfläche deaktivieren/nicht anklickbar einstellen. Kann mir jemand helfen?

Hier mein Button:

.good-form > .actions a,
.theButton {
    display: inline-block;
    width: 540px;
    margin: 20px 0 10px;
    padding: 12px;
    background-color: #b6adb4;
    border-radius: 2px;
    border: 0px;
    text-align: center;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;

}

Und hier ist meine jquery:

Zuerst habe ich das versucht: NICHT FUNKTIONIEREN!

$(".good-form > .actions a, .theButton").attr('disabled','disabled');

Zweitens habe ich das versucht: FUNKTIONIERT NICHT

$(".good-form > .actions a, .theButton").addClass('disabled');

oder

$(".good-form > .actions a, .theButton").addClass("disabled");

Herzlichen Dank!

  • Kannst du deine hinzufügen HTML Code bitte!

    – Mehdi Bouzidi

    4. Oktober 2017 um 13:22 Uhr

  • Sie können einstellen pointer-events: none; auf der Taste

    – abhishekkannojia

    4. Oktober 2017 um 13:23 Uhr


  • Wurde Ihre Klasse erfolgreich hinzugefügt, als Sie den zweiten Code verwendet haben?

    – Anant – Lebendig um zu sterben

    4. Oktober 2017 um 13:23 Uhr

  • Es ist kein Formelement, es ist nur ein Anker. Das deaktivierte Attribut funktioniert nicht.

    – Canser Janbakan

    4. Oktober 2017 um 13:25 Uhr

  • Es sieht so aus, als ob das Problem bei Ihrem Selektor liegt – ohne HTML ist es unmöglich, genau zu sagen, was das Problem ist.

    – Freiheitn-m

    4. Oktober 2017 um 13:26 Uhr

Benutzer-Avatar
Anant – Lebendig um zu sterben

Ich hoffe das geht (disabled Klasse erfolgreich hinzugefügt):-

$(".good-form > .actions a, .theButton").addClass('disabled');
// IF NOT THEN USE $(".theButton").addClass('disabled');

Fügen Sie jetzt CSS wie unten hinzu: –

.disabled{
  pointer-events: none;
}

Dies wird auch funktionieren (ohne zusätzliches CSS) :-

$(".good-form > .actions a, .theButton").prop('disabled',true); 
// or $(".theButton").prop('disabled',true);

  • Die Verwendung von Zeigerereignissen hilft jedoch nicht beim automatischen Testen der Schaltfläche. Die Schaltfläche kann weiterhin mithilfe von Skripts angeklickt werden.

    – Akhil Ghatiki

    12. Mai um 9:40 Uhr

Versuchen Sie, Ihrem Element eine Klasse hinzuzufügen, und geben Sie das folgende CSS an: –

HTML

<input type="button" value="Save" class="Disabled"/>

CS

.Disabled{
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;

}

Hoffe das hilft 🙂

Der gesuchte Code lautet (vorausgesetzt, die Schaltfläche hat eine ID).

document.getElementById("theButton").disabled = true;

Und Sie können es in CSS so gestalten:

#theButton:disabled{
   background: white;
   /*or whatever*/
}

das ist reines JS, HTML und CSS (ich hoffe, ich habe geholfen)

/* ignore top lines */
document.getElementById("theButton").addEventListener("click", myFunction);
/* ignore top lines */

function myFunction() {
document.getElementById("theButton").disabled = true;
}
.theButton {
    display: inline-block;
    width: 540px;
    margin: 20px 0 10px;
    padding: 12px;
    background-color: #b6adb4;
    border-radius: 2px;
    border: 0px;
    text-align: center;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
    cursor: pointer;
}

.theButton:disabled {
    display: inline-block;
    width: 540px;
    margin: 20px 0 10px;
    padding: 12px;
    background-color: #b6adb4;
    border-radius: 2px;
    border: 0px;
    text-align: center;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
    opacity: 0.5;
}
<button class="theButton" id="theButton">
Click to disable
</button>

JSFIDDLE HIER: https://jsfiddle.net/HappyFone/swbjer8/8/

Benutzer-Avatar
iamwtk

Probier diese

$(".good-form > .actions a, .theButton").prop('disabled',true);

  • Nur zur Info, es ist prop()nicht props()und der zweite Parameter sollte ein boolescher Wert sein

    – Rory McCrossan

    4. Oktober 2017 um 13:25 Uhr

Schaltfläche deaktivieren

$(".good-form > .actions a, .theButton").prop('disabled', true);

CSS für deaktivierte Schaltfläche

.theButton:disabled { /* YOUR CSS */}

  • Nur zur Info, es ist prop()nicht props()und der zweite Parameter sollte ein boolescher Wert sein

    – Rory McCrossan

    4. Oktober 2017 um 13:25 Uhr

1186300cookie-checkcss-Schaltfläche auf nicht klickbar gesetzt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy