jQuery 如何干掉类似的 onclick 事件调用

Question

我想监听两个输入更改事件，当其中一个更改时，选中复选框并禁用该元素。同样，当输入框的值回到默认值时，它需要将复选框回滚到以前的状态。点击功能看起来像90%的相似度，如何DRY它们？

var payment = 'old payment';        
var billAdr = 'old billAdr';

$('#payment').val(payment);
$('#bill-adr').val(billAdr);

$('#payment').on('input', function() {
  var newPayment = $('#payment').val();
  if(newPayment !== payment) {
    $("#save-nxt-time").attr('checked', true);
    $("#save-nxt-time").prop('disabled', true);
  } else {
    var newBillAdr = $('#bill-adr').val();
    if(newBillAdr === billAdr) {
      $("#save-nxt-time").prop('disabled', false);
      $("#save-nxt-time").attr('checked', false);
    }
  }
});

$('#bill-adr').on('input', function() {
  var newBillAdr = $('#bill-adr').val();
  if(newBillAdr !== billAdr) {
    $("#save-nxt-time").attr('checked', true);
    $("#save-nxt-time").prop('disabled', true);
  } else {
    var newPayment = $('#payment').val();
    if(newPayment === payment) {
      $("#save-nxt-time").prop('disabled', false);
      $("#save-nxt-time").attr('checked', false);
    }
  }
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form action="/#">
    <label for="payment">payment</label>
    <input type="text" id="payment" name="payment">
    <br>
    <label for="bill-adr">bill address</label>
    <input type="text" id="bill-adr" name="bill-adr">
    <br>
    <input type="checkbox" id="save-nxt-time">
    <label for="save">Save to next time</label><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Answer 1

const oldPa = 'old payment';
const oldBi = 'old billAdr';

const $next = $('[name="save-nxt-time"]');
const $paym = $('[name="payment"]').val(oldPa);
const $bill = $('[name="bill-adr"]').val(oldBi);
const $paBi = $paym.add($bill);

$paBi.on('input', () => {
  const bool = $paym.val() !== oldPa || $bill.val() !== oldBi;
  $next.prop({disabled: bool, checked: bool});
});

form label {display: block;}

<form action="/#">
  <label><span>Payment</span> <input type="text" name="payment"></label>
  <label><span>Billing address</span> <input type="text" name="bill-adr"></label>
  <label><input type="checkbox" name="save-nxt-time"> <span>Save to next time</span></label>
  <input type="submit" value="Submit">
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

像这样？

// first load
checkTest(true);

$('#payment, #bill-adr').on('input', function() { 
   checkTest(false, $(this).attr('id'), $(this).val(), "#save-nxt-time");  
});
  
function checkTest(init = false, id, value, input) {
  var payment = 'old payment', billAdr = 'old billAdr';
 
  if (init === true) {
    $('#payment').val(payment);
    $('#bill-adr').val(billAdr);
  }

  console.clear();
  console.log(value);

  if (value === billAdr || value === payment) {
    $(input).prop('disabled', false).attr('checked', false);
  } else {
    $(input).attr('checked', true).prop('disabled', true);    
  }
}

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <form action="/#">
    <label for="other">payment</label>
    <input type="text" id="payment" name="fname">
    <br>
    <label for="other">bill address</label>
    <input type="text" id="bill-adr" name="fname">
    <br>
    <input type="checkbox" id="save-nxt-time">
    <label for="save">Save to next time</label><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Answer 3

如何将元素的文本和id放入数组中并循环遍历运行下面的片段

$(document).ready(function() {
  const p = new PaymentMgr();
  p.init();
});

class PaymentMgr {
  constructor() {
    this.data = [{
      text: 'old payment',
      id: 'payment'
    }, {
      text: 'old bill address',
      id: 'bill-adr'
    }];
  }

  init() {
    this.data.forEach(element => $(`#${element.id}`)
      .val(element.text)
      .on("input", (e) => {
        ['checked', 'disabled'].forEach(attribute =>
          $("#save-nxt-time")
          .attr(attribute, $(e.target).val() !== element.text))
      })
    );
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="/#">
  <label for="payment">payment</label>
  <input type="text" id="payment" name="payment">
  <br>
  <label for="bill-adr">bill address</label>
  <input type="text" id="bill-adr" name="bill-adr">
  <br>
  <input type="checkbox" id="save-nxt-time">
  <label for="save">Save to next time</label><br><br>
  <input type="submit" value="Submit">
</form>

jQuery 如何干掉类似的 onclick 事件调用

jQuery how to DRY the similar onclick event calls

html

javascript

jquery

dry