JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div id="respond" class="comment-respond">
  <h3 id="reply-title" class="comment-reply-title">Schreibe einen Kommentar <small><a rel="nofollow" id="cancel-comment-reply-link" href="/das-naechste-helpful-update/#respond" style="display:none;"><i class="entypo-squared-cross"></i></a></small></h3>
  <form action="#" method="post" id="commentform" class="comment-form" novalidate="">
    <p class="comment-notes"><span id="email-notes">Deine E-Mail-Adresse wird nicht veröffentlicht.</span> Erforderliche Felder sind mit <span class="required">*</span> markiert.</p>
    <div class="col-md-12">
      <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="3" placeholder="Kommentar" aria-required="true"></textarea></p>
    </div>
    <div class="col-md-4">
      <p class="comment-form-author">
        <input id="author" name="author" type="text" placeholder="Name *" value="" size="30" aria-required="true" required="required"></p>
    </div>
    <div class="col-md-4">
      <p class="comment-form-email">
        <input id="email" name="email" type="email" placeholder="Email *" value="" size="30" aria-describedby="email-notes" aria-required="true" required="required"></p>
    </div>
    <div class="col-md-4">
      <p class="comment-form-url">
        <input id="url" name="url" type="url" placeholder="Webseite" value="" size="30"></p>
    </div>
    <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Kommentar abschicken"> <input type="hidden" name="comment_post_ID" value="1141" id="comment_post_ID">
      <input type="hidden" name="comment_parent" id="comment_parent" value="0">
    </p>
    <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="5fd881ae44"></p>
    <p style="display: none;"></p> <input type="hidden" id="ak_js" name="ak_js" value="1524569771914"></form>
</div>

JavaScript

jQuery(function($) {

  formCheckbox({
    selector: {
      parent: $('#commentform'),
      button: $('#commentform').find('[type=submit]')
    },
    checkbox: {
      label: 'Ich bin mit der Speicherung meiner Daten einverstanden.'
    }
  });


  function formCheckbox(options) {

    var checkbox = '<input type="checkbox" id="dsvgocb" value="0" />';
    var checkboxLabel = '<label for="dsvgocb">' + options.checkbox.label + '</label>';
    var checkboxHtml = '<div class="devhats-dsvgo">' + checkbox + checkboxLabel + '</div>';
    var submitButton = $(options.selector.button);
    var submitForm = $(options.selector.parent);

    $(submitForm).find('.form-submit').prepend(checkboxHtml);
    $(submitButton).prop('disabled', true).css('opacity', '.25');

    $('#dsvgocb').on('change', function() {
      if ($(this).is(':checked')) {
        $(submitButton).prop('disabled', false).css('opacity', '1');
      } else {
        $(submitButton).prop('disabled', true).css('opacity', '.25');
      }
    });
  }
});