CODEWITHSUNDEEP
javascriptjquery
Jack
Jack

Reputation: 33

On change disable/enable fields

I'm trying to disable/enable fields while choosing a result from a dropdown menu. When type1 is chosen it should show all fields, type2 it should disable the dropdown menu and type3 should also disable the extra field.

<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>

And here is the javascript I'm trying to use

<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>

Can't figure out what I am doing wrong :/

Upvotes: 0

Views: 732

Answers (4)

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

You have done small mistake.

$(this).attr("value") in select will not give you the value. You should use $(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>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

It's a little bit hard to understand what you want to happen in what case, but here is the solution for you, tell me if something is missing:

$(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})
    }
  });
});

Demo

$(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})
    }
  });
});
<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>

Upvotes: 1

sumit
sumit

Reputation: 129

    <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>

In above jquery if type1 is selected dropdown and extra field will be shown ,if type2 dropdown will disabled and in type3 both dropdown and extra will be disabled

Upvotes: 0

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

When the select value changes you can enable all your fields and disabled those field which satisfies your condition. Refer to below working code- 

$(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>

Upvotes: 1

Related Questions