关于更改功能的jQuery

Question

我有一个带标头和详细部分的XHTML页面。标头包含过滤器，细节包括根据所选的过滤器从db中获取数据。我的要求，我的过滤器包含一个带有2个值的下拉值假设" A"one_answers" B"，因此根据选择，我想禁用其他一些下拉列表。

我在下面添加了代码段： -

<script type="text/javascript">
                $(function() {
                    $('select').change(function() {
                    alert($(this).val());
                    if($(this).val() == "A"){
                        $(document.getElementById('dataForm:listView:filterId:field10value1')).prop("disabled", true);
                        $(document.getElementById('dataForm:listView:filterId:field4value1')).prop("disabled", false);
                        $(document.getElementById('dataForm:listView:filterId:field6value1')).prop("disabled", false);
                    }else if($(this).val() == "R"){
                        $(document.getElementById('dataForm:listView:filterId:field10value1')).prop("disabled", false);
                        $(document.getElementById('dataForm:listView:filterId:field4value1')).prop("disabled", true);
                        $(document.getElementById('dataForm:listView:filterId:field6value1')).prop("disabled", true);
                    }else{
                        $(document.getElementById('dataForm:listView:filterId:field10value1')).prop("disabled", false);
                        $(document.getElementById('dataForm:listView:filterId:field4value1')).prop("disabled", false);
                        $(document.getElementById('dataForm:listView:filterId:field6value1')).prop("disabled", false);
                    }
                    })
                })
            </script>

这是第一次工作正常。但是，当我单击申请以获取数据时，下次它不起作用。

请帮助！

Answer 1

如果您想要一个完整的jQuery解决方案，这将看起来像以下内容。

工作示例：https：//jsfiddle.net/twisty/hfqc4cz5/

html

<div class="ui-widget">
  <select>
    <option></option>
    <option>A</option>
    <option>R</option>
  </select>
</div>
<div class="ui-widget">
  <input id="dataForm:listView:filterId:field10value1" />
  <input id="dataForm:listView:filterId:field4value1" />
  <input id="dataForm:listView:filterId:field6value1" />
</div>

javascript

$(function() {
  $('select').change(function() {
    var selected = $(this).val();
    var field10 = $('#dataForm\:listView\:filterId\:field10value1'),
      field04 = $('#dataForm\:listView\:filterId\:field4value1'),
      field06 = $('#dataForm\:listView\:filterId\:field6value1');
    switch (selected) {
      case "A":
        console.log("A Selected.");
        field10.prop("disabled", true);
        field04.prop("disabled", false);
        field06.prop("disabled", false);
        break;
      case "R":
        console.log("R Selected.");
        field10.prop("disabled", false);
        field04.prop("disabled", true);
        field06.prop("disabled", true);
        break;
      default:
        console.log("'' Selected.");
        field10.prop("disabled", false);
        field04.prop("disabled", false);
        field06.prop("disabled", false);
    }
  });
});

来自https://api.jquery.com/category/selectors/：

要使用任何元字符(例如!"#$%&'()*+,./:;<=>?@[]^{|}~(作为名称的字面部分，必须使用两个后斜切(\(将其逃脱。例如，具有ID =" foo.bar"的元素可以使用selector $("#foo\.bar")。

我还使用了switch()结构。它做同样的事情，但我更喜欢它，因为我将来可以种植它。

您还将看到我使用了jQuery选择器，而不是RAW JAVASCRIPT方法。我还将jQuery对象推入了自己的变量以易于使用。