Как отключить кнопку - HTML / Javascript

Question

У меня есть первые два ввода, которые должны быть правильными (что означает регулярное выражение валидатора)

Затем у меня есть 2 дополнительных поля.Если флажок установлен, мне не нужно значение даты, если он не установлен, мне нужно значение даты.

Как я могу использовать эту логику, чтобы кнопка была включена только тогда, когдаусловия выполнены?

<form id="newReferenceAccountForm" name="newReferenceAccountForm">
<table>
  <tbody>
    <tr>
      <td><b>NEUE IBAN</b> <i class="required-asterix">*</i></td>
      <td class="form-group">
        <div class="col-xs-7 input-group">
          <span class="input-group-addon"><span><b>DE</b></span></span>
          <input validator="/^(\d *){20}$/" id="newIban" ng-keyup="vm.checkIBAN();" validator-invoke="watch" validator-error="fehlerhafte IBAN-Eingabe" ng-model="vm.NewReferenceAccount.newReferenceNumber" class="form-control" placeholder="Bitte, geben Sie die neue IBAN ein"
            required>
        </div>
      </td>
    </tr>
    <tr>
      <td><b>KONTOINHABER</b> <i class="required-asterix">*</i></td>
      <td class="form-group">
        <div class="col-xs-7 input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input validator="/^[a-zA-Z ]+$/" validator-error="fehlerhafte KONTOINHABER-Eingabe" validator-invoke="watch" type="text" class="form-control" ng-model="vm.NewReferenceAccount.newAccountNameOwner" placeholder="Bitte, geben Sie den neuen Kontoinhaber ein"
            required>
        </div>
        </div>
      </td>
    </tr>
    <tr>
      <td><b>GÜLTIG ab</b> <i class="required-asterix">*</i></td>
      <td>
        <input ipp-checkbox label="SOFORT" uib-tooltip="Check if it's current date" type="checkbox" ng-model="vm.NewReferenceAccount.isNotFutureDate" ng-init="vm.NewReferenceAccount.isNotFutureDate = true" />

        <div class="col-xs-7 input-group">
          <input type="date" ng-model="vm.NewReferenceAccount.changeDate" uib-tooltip="Select the Change Date" ng-readonly="vm.NewReferenceAccount.isNotFutureDate" date-format="dd-MM-yyyy" date-parser-format="DD-MM-YYYY" required />
        </div>
      </td>
    </tr>
  </tbody>
</table>
</form>

<button type="button" ng-disabled="??????????????" ng-click="vm.acceptTicket();" uib-tooltip="Accept the ticket" class="btn btn-default btn-hover-success">Submit&nbsp;<i class="glyphicon glyphicon-ok"></i></button>

Answer 1

Используйте прослушиватель событий для прослушивания клика, а затем отключите дату соответственно:

document.getElementById("inpchk").addEventListener("click", function() {
  if (document.getElementById("inpchk").checked == true) {
    document.getElementById("inpdt").disabled = true;
  } else {
    document.getElementById("inpdt").disabled = false;
  }
});

<form id="newReferenceAccountForm" name="newReferenceAccountForm">
  <table>
    <tbody>
      <tr>
        <td><b>NEUE IBAN</b> <i class="required-asterix">*</i></td>
        <td class="form-group">
          <div class="col-xs-7 input-group">
            <span class="input-group-addon"><span><b>DE</b></span></span>
            <input validator="/^(\d *){20}$/" id="newIban" ng-keyup="vm.checkIBAN();" validator-invoke="watch" validator-error="fehlerhafte IBAN-Eingabe" ng-model="vm.NewReferenceAccount.newReferenceNumber" class="form-control" placeholder="Bitte, geben Sie die neue IBAN ein"
              required>
          </div>
        </td>
      </tr>
      <tr>
        <td><b>KONTOINHABER</b> <i class="required-asterix">*</i></td>
        <td class="form-group">
          <div class="col-xs-7 input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input validator="/^[a-zA-Z ]+$/" validator-error="fehlerhafte KONTOINHABER-Eingabe" validator-invoke="watch" type="text" class="form-control" ng-model="vm.NewReferenceAccount.newAccountNameOwner" placeholder="Bitte, geben Sie den neuen Kontoinhaber ein"
              required>
          </div>
          </div>
        </td>
      </tr>
      <tr>
        <td><b>GÜLTIG ab</b> <i class="required-asterix">*</i></td>
        <td>
          <input id="inpchk" ipp-checkbox label="SOFORT" uib-tooltip="Check if it's current date" type="checkbox" ng-model="vm.NewReferenceAccount.isNotFutureDate" ng-init="vm.NewReferenceAccount.isNotFutureDate = true" />

          <div class="col-xs-7 input-group">
            <input id="inpdt" type="date" ng-model="vm.NewReferenceAccount.changeDate" uib-tooltip="Select the Change Date" ng-readonly="vm.NewReferenceAccount.isNotFutureDate" date-format="dd-MM-yyyy" date-parser-format="DD-MM-YYYY" required />
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

<button type="button" ng-disabled="??????????????" ng-click="vm.acceptTicket();" uib-tooltip="Accept the ticket" class="btn btn-default btn-hover-success">Submit&nbsp;<i class="glyphicon glyphicon-ok"></i></button>

Answer 2

Это можно сделать с помощью JavaScript, отключив кнопку изначально в HTML.

HTML:

<input type="button" disabled="disabled"/>

JS:

(function() {
$('form > input').keyup(function() {

    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    } else {
        $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    }
});
})()