Question

现在，我有：

<tr>
  <td class="label">Status:</td>
  <td> 
  <select name="bookStatus" id="status">
  <option value="-1">- Select -</option>
  <option value="0">- Active -</option>
  <option value="1">- Disabled -</option>
  <option value="2">- Cancelled -</option>
  </select>
  </td>
</tr>
</br>
<div id=outprint style="display:none">
<tr>
  <td class="label">Out of Print?</td>
  <td><input type="checkbox" name="outOfPrint" id="chk"/></td>
</tr>
</div>  



<div id="showthis" style="display:none">
  <tr>
  <td class="label">Remove from ALL QUEUES and Notify?</td>
  <td><input type="checkbox" name="removeAndNotify"/></td>
</tr>
</div>

和我的脚本：

$('#status').change(function () {
    var show = $(this).val();
  if (show != "-1") {
    $('#outprint').show();
  }
  else {
   $('#outprint').hide();
   $('#showthis').hide();
  }

    $('#chk').change(function (){
  if (show == "1") {
    if ($(this).is(":checked")) {
     $('#showthis').show();
     } else {
     $('#showthis').hide();
     }
  }
  else {
    $('#showthis').hide();
  }
  });
});

基本上我正在寻找隐藏的文本来弹出更改下拉菜单时以及将其设置为“已禁用”时然后选中复选框，出现最后一个复选框。

我遇到的问题是：

1）当我点击Disabled并选中复选框，然后我将Disabled更改为另一个选项时，隐藏的文本仍然会弹出。

2）您点击默认选项以外的任何选项，然后在将选项从下拉菜单更改为已禁用 - ＆gt;之前先单击复选框。隐藏的文字没有显示出来。

我该如何处理？

Fiddle

Answer 1

所做的更改：修复了无效的htmls，修复了不正确的事件绑定。

您的HTML：

<table>
  <tbody>
    <tr>
      <td class="label">Status:</td>
      <td>
        <select name="bookStatus" id="status">
          <option value="-1">- Select -</option>
          <option value="0">- Active -</option>
          <option value="1">- Disabled -</option>
          <option value="2">- Cancelled -</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>


<table id=outprint style="display:none">
  <tbody>
    <tr>
      <td class="label">Out of Print?</td>
      <td>
        <input type="checkbox" name="outOfPrint" id="chk" />
      </td>
    </tr>
  </tbody>
</table>

<table id="showthis" style="display:none">
  <tbody>
    <tr>
      <td class="label">Remove from ALL QUEUES and Notify?</td>
      <td>
        <input type="checkbox" name="removeAndNotify" />
      </td>
    </tr>
  </tbody>
</table>

使用Javascript：

var show;
$('#status').change(function() {
  show = $(this).val();
  if (show != "-1") {
    $('#outprint').show();
  } else {
    $('#outprint').hide();
    $('#showthis').hide();
  }
});

$('#chk').change(function() {
  if (show == "1") {
    if ($(this).is(":checked")) {
      $('#showthis').show();
    } else {
      $('#showthis').hide();
    }
  } else {
    $('#showthis').hide();
  }
});

DEMO

Answer 2

我猜你只需要从下拉列表中更改选项然后遍历逻辑，就可以将隐藏控件的状态重置为默认值。

$('#status').change(function () {
 ResetState();
    var show = $(this).val();
  if (show != "-1") {
    $('#outprint').show();
  }
  else {
   $('#outprint').hide();
   $('#showthis').hide();
  }

    $('#chk').change(function (){
  if (show == "1") {
    if ($(this).is(":checked")) {
     $('#showthis').show();
     } else {
     $('#showthis').hide();
     }
  }
  else {
    $('#showthis').hide();
  }
  });
});

function ResetState()
{
   $('#outprint').hide();
   $('#showthis').hide();
   $('#chk').prop("checked", false);
}

示例：https://jsfiddle.net/DinoMyte/up4j39qr/4/

如何在选中下拉列表中的特定值时切换文本复选框

2 个答案:

DEMO