获取以前的值时jQuery更改事件逻辑？

Question

在将页面称为Getting value of select (dropdown) before change之后，我试图用jQuery实现以下逻辑：

两个元素关系：指示符切换是/否以控制可编辑的原因 第1列是页面加载指示符初始值，最后一列是最终选择，列之间是冗余选项（特别是在用户只是切换它但不是真的需要任何理由的情况下），因为指标实际上只包含是/否两个值，简化了以下4种情况：

（1）Y-N（页面加载指示为Y，最后改为N） - ＆gt;理由可编辑

（2）Y - N - Y（页面加载指示为Y，冗余改变为N，最后改为Y） - ＆gt;理由可编辑

（3）N - Y（页面加载指示为N，最后改为Y） - ＆gt;理由可编辑

（4）N - Y - N（页面加载指示为N，冗余改变为Y，最后改为N） - ＆gt;原因不可编辑

现在的问题是下面的代码，它从未遇到过case（4），我观察指标检索到的前一个值，但是当页面加载时似乎没有保留为初始值，例如当页面加载时，指示符为'N'，用户首先将其更改为'Y'，然后更改回'N'，但前数据值将为'Y'，而不是我期望的原始页面加载初始值'N'，我使用一个弹出对话框来观察这个问题。

有人可以帮我弄清楚如何更改此代码以实现上述逻辑，包括案例（4）？

（我想它与脚本部分中的最后一个语句有关jqThis.data("prev", after_change);更新以前的数据）？但是如何在此之前添加逻辑以保持真正的初始先前值（在页面加载值上）以用于if-else逻辑？

$(window).load(function() {
  var indicator = $(document.getElementById("indicator"));

  // set the pre data, usually needed after you initialize the select element
  indicator.data("prev", indicator.val());

  // Handle initial status of indicator, when page load, if it is 'N' disable
  // reason field, if it is 'Y' open reason field
  if (indicator.data("prev") == 'N') {
    $(document.getElementById("reason")).attr('disabled', 'disabled');
  } else {
    $(document.getElementById("reason")).removeAttr('disabled');
  }

  // Handle change status of indicator, 
  indicator.change(function(data) {
    var jqThis = $(this);

    // get changed data
    var after_change = jqThis.val();

    // get the pre data (Question : I expect the pre data should be original page load value, but 
    // seems it always the latest one before current value ?)
    // e.g when page load, indicator is 'N', user first change it to 'Y', then change back to 'N', but
    // the pre data value will be 'Y', not what I expect as original page load initial value 'N'
    // I use a pop up dialog to observe this issue.
    var before_change = jqThis.data("prev");

    // Debug
    console.log("before:",before_change);

    // do your work here
    if (before_change == 'N' && after_change == 'Y') {
      // Change indicator from No to Yes, please type in reason
      $(document.getElementById("reason")).attr('disabled', 'disabled');
    } else if (before_change == 'Y' && after_change == 'N') {
      // Change indicator from Yes to No, please type in reason
      $(document.getElementById("reason")).attr('disabled', 'disabled');
    } else if (before_change == 'N' && after_change == 'N') {
      // Keep indicator as its initial status No
      $(document.getElementById("reason")).removeAttr('disabled');
    } else if (before_change == 'Y' && after_change == 'Y') {
      // Keep indicator as its initial status Yes, if necessary you can type in new reason
      $(document.getElementById("reason")).attr('disabled', 'disabled');
    }

    // update the pre data
    jqThis.data("prev", after_change);
  });
});

.htmlClass {
  padding: 8px;
  border: 1px solid blue;
  margin-bottom: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="myform">
  <div align="center">
    <select id="indicator">
      <option value="Y">Yes</option>
      <option value="N">No</option>
    </select>
    <textarea id="reason">
    </textarea>
</form>

Answer 1

也许如果你

1. 使用prop
2. 不要移除道具
3. 简化您的逻辑
4. 使用更新版本的jQuery

$(window).load(function() {
  var $indicator = $("#indicator"); // if you have colons, use #mypage\\:indicator
  var $reason = $("#reason");

  // set the pre data, usually needed after you initialize the select element
  $indicator.data("prev", $indicator.val());

  // Handle initial status of indicator, when page load, if it is 'N' disable
  // reason field, if it is 'Y' open reason field
  $reason.prop('disabled', $indicator.data("prev") == 'N');

  // Handle change status of indicator, 
  $indicator.on("change", function(data) {
    var jqThis = $(this);

    // get changed data
    var after_change = jqThis.val();

    // get the pre data (Question : I expect the pre data should be original page load value, but 
    // seems it always the latest one before current value ?)
    // e.g when page load, indicator is 'N', user first change it to 'Y', then change back to 'N', but
    // the pre data value will be 'Y', not what I expect as original page load initial value 'N'
    // I use a pop up dialog to observe this issue.

    var before_change = jqThis.data("prev");

    // Debug
    console.log("before:", before_change);

    // do your work here
    /* var dis = (before_change == 'N' && after_change == 'Y') ||
              (before_change == 'Y' && after_change == 'N') ||
              (before_change == 'Y' && after_change == 'Y') */
    var dis = !(before_change == 'N' && after_change == 'N'); 
    $reason.prop('disabled', dis);

    // update the pre data
    jqThis.data("prev", after_change);
  });
});

.htmlClass {
  padding: 8px;
  border: 1px solid blue;
  margin-bottom: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="myform">
  <div align="center">
    <select id="indicator">
      <option value="Y">Yes</option>
      <option value="N">No</option>
    </select>
    <textarea id="reason">
    </textarea>
</form>

Answer 2

首先感谢mplungjan的工作，因为我正在尝试编辑他的版本，但被同行评审员拒绝并建议发布一个新版本，我将根据他的答案发布一个声明并解决问题。

$(window).load(function() {
  var $indicator = $("#indicator"); // if you have colons, use #mypage\\:indicator
  var $reason = $("#reason");

  // set the pre data, usually needed after you initialize the select element
  $indicator.data("prev", $indicator.val());

  // Handle initial status of indicator, when page load, if it is 'N' disable
  // reason field, if it is 'Y' open reason field
  $reason.prop('disabled', $indicator.data("prev") == 'N');

  // Handle change status of indicator, 
  $indicator.on("change", function(data) {
    var jqThis = $(this);

    // get changed data
    var after_change = jqThis.val();

    // get the pre data (Question : I expect the pre data should be original page load value, but 
    // seems it always the latest one before current value ?)
    // e.g when page load, indicator is 'N', user first change it to 'Y', then change back to 'N', but
    // the pre data value will be 'Y', not what I expect as original page load initial value 'N'
    // I use a pop up dialog to observe this issue.

    var before_change = jqThis.data("prev");

    // Debug
    console.log("before:", before_change);

    // do your work here
    /* var dis = (before_change == 'N' && after_change == 'Y') ||
              (before_change == 'Y' && after_change == 'N') ||
              (before_change == 'Y' && after_change == 'Y') */
    //var dis = !(before_change == 'N' && after_change == 'N'); 
    //$reason.prop('disabled', dis);

    // Before concise I just keep original logic in question
    // to show the issue
    if (before_change == 'N' && after_change == 'Y') {
      $reason.prop('disabled', false);
    } else if (before_change == 'Y' && after_change == 'N') {
      $reason.prop('disabled', false);
    } else if (before_change == 'N' && after_change == 'N') {
      $reason.prop('disabled', true);
    } else if (before_change == 'Y' && after_change == 'Y') {
      $reason.prop('disabled', false);
    }

    // update the pre data
    // !! IMPORTANT !! --> This is exactly what cause only
    // get most recent value before current changed value,
    // as continuously update the value in data.
    // As I test, the easiest way is to comment out this
    // line, it will never update the indicator's real 
    // initial value when page load, so that's my goal which
    // compare "real initial value" with "current changed value"
    jqThis.data("prev", after_change);
  });
});

.htmlClass {
  padding: 8px;
  border: 1px solid blue;
  margin-bottom: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="myform">
  <div align="center">
    <select id="indicator">
      <option value="Y">Yes</option>
      <!-- To observe the real issue, need to set default case as 'N' -->
      <option value="N" selected="selected">No</option>
    </select>
    <textarea id="reason">
    </textarea>
</form>