Question

我正在尝试从下拉菜单中选择结果时禁用/启用字段。选择type1时，它应该显示所有字段，type2它应禁用下拉菜单，而type3也应禁用多余的字段。

<select id="TType">
    <option value="type1">Full</option>
    <option value="type2">Show less</option>
    <option value="type3">Show even less</option>
</select>

<input type="text" maxlength="5" id="customer" name="customer">
<input type="text" maxlength="10" id="extra" name="extra">
<select id="city" name="city">
    <option value="0"> - </option>
    <option value="1">New York</option>
    <option value="2">Chicago</option>
    <option value="3">London</option>
    <option value="4">Athens</option>
</select>

这是我要使用的javascript

<script>
$(document).ready(function(){
  $("select").on("change", function(){
    var formId = $(this).attr("value");
    if(formId == "type1"){
      $("input[type=text]").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "customer" || inputId == "extra"){
          $(this).prop("disabled",false);
          $(this).prop("required",true);
        }
      })
      $("select").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "city"){
          $(this).prop("disabled",false);
          $(this).prop("required",true);
        }
      })
    }else if(formId == "type2"){
      $("select").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "city"){ 
          $(this).prop("disabled",true);
        }
      })
    }else if(formId == "type3"){
      $("select").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "city"){ 
          $(this).prop("disabled",true);
        }
      })
      $("input[type=text]").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "extra"){
          $(this).prop("disabled",true);
        }else{
          $(this).prop("disabled",false);
          $(this).prop("required",true);
        }
       })
    }
  });
});
</script>

无法弄清楚我在做什么错：/

Answer 1

很难理解在什么情况下会发生什么，但这是为您提供的解决方案，告诉我是否缺少某些东西：

ID  Year Month Value
123 2018   1   9987
123 2018   2   80988

演示

$(document).ready(function() {
  $("select").on("change", function() {
    var formId = $(this).val();
    if (formId == "type1") {
      $('#customer, #extra, #city').prop({"disabled": false, "required": true})
    } else if (formId == "type2") {
      $('#customer, #extra').prop({"disabled": false, "required": true})
      $('#city').prop({"disabled": true, "required": false})
    } else if (formId == "type3") {
      $('#customer').prop({"disabled": false, "required": true})
      $('#extra, #city').prop({"disabled": true, "required": false})
    }
  });
});

$(document).ready(function() {
  $("select").on("change", function() {
    var formId = $(this).val();
    if (formId == "type1") {
      $('#customer, #extra, #city').prop({"disabled": false, "required": true})
    } else if (formId == "type2") {
      $('#customer, #extra').prop({"disabled": false, "required": true})
      $('#city').prop({"disabled": true, "required": false})
    } else if (formId == "type3") {
      $('#customer').prop({"disabled": false, "required": true})
      $('#extra, #city').prop({"disabled": true, "required": false})
    }
  });
});

Answer 2

当选择值更改时，您可以启用所有字段，并禁用那些满足您条件的字段。请参阅下面的工作代码-

$(document).ready(function() {
  $("select").on("change", function() {
    var selectVal = $(this).val();
    $('#customer, #extra, #city').prop("disabled", false)
    if (selectVal == "type2") {
      $('#city').prop("disabled", true)
    } else if (selectVal == "type3") {
      $('#city, #extra').prop("disabled", true)
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="TType">
  <option value="type1">Full</option>
  <option value="type2">Show less</option>
  <option value="type3">Show even less</option>
</select>

<input type="text" maxlength="5" id="customer" name="customer">
<input type="text" maxlength="10" id="extra" name="extra">
<select id="city" name="city">
  <option value="0"> - </option>
  <option value="1">New York</option>
  <option value="2">Chicago</option>
  <option value="3">London</option>
  <option value="4">Athens</option>
</select>

Answer 3

您犯了小错误。

选择中的

$(this).attr("value")不会给您带来价值。您应该使用$(this).val()。

$(document).ready(function(){
  $("select").on("change", function(){
    var formId = $(this).val();
    if(formId == "type1"){
      $("input[type=text]").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "customer" || inputId == "extra"){
          $(this).prop("disabled",false);
          $(this).prop("required",true);
        }
      })
      $("select").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "city"){
          $(this).prop("disabled",false);
          $(this).prop("required",true);
        }
      })
    }else if(formId == "type2"){
      $("select").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "city"){ 
          $(this).prop("disabled",true);
        }
      })
    }else if(formId == "type3"){
      $("select").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "city"){ 
          $(this).prop("disabled",true);
        }
      })
      $("input[type=text]").each(function(){
        var inputId = $(this).attr("id");
        if(inputId == "extra"){
          $(this).prop("disabled",true);
        }else{
          $(this).prop("disabled",false);
          $(this).prop("required",true);
        }
       })
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="TType">
    <option value="type1">Full</option>
    <option value="type2">Show less</option>
    <option value="type3">Show even less</option>
</select>

<input type="text" maxlength="5" id="customer" name="customer">
<input type="text" maxlength="10" id="extra" name="extra">
<select id="city" name="city">
    <option value="0"> - </option>
    <option value="1">New York</option>
    <option value="2">Chicago</option>
    <option value="3">London</option>
    <option value="4">Athens</option>
</select>

Answer 4

    <script>
    $(document).ready(function(){
      $("#TType").on("change", function(){
        var formId = $(this).attr("value");
        if(formId == "type2"){
         $('#city').attr('disabled',true);
          $('#extra').attr('disabled',false);


         }else if(formId == "type3"){
            $('#extra').attr('disabled',true);
            $('#city').attr('disabled',true);

         }else{

            $('#extra').attr('disabled',false);
            $('#city').attr('disabled',false);

        }

    });
});

</script>

在上面的jquery中，如果选择了type1下拉菜单，则会显示多余的字段，如果type2下拉菜单将被禁用，而在type3中，下拉菜单和extra都将被禁用

更改时禁用/启用字段

4 个答案: