venance haule

venance haule

  • NA
  • 10
  • 1.1k

Disabling and Enabling text box based on selection option

Feb 6 2017 3:20 AM
  1.  

    i'm developing a system about group registration, i have four category of groups, which are men group, women group, youth group and both group (men and women)
    during registration of groups at the category there is selection option where a user can choose either group, and below that selection option i have two text box, one text box is to enter number of men and other text box is to enter number of women, by default they are disabled, what i want is if user choose men category, only the textbox for men should be active, and if user choose women category only the textbox for women should be active, if a user choose both or youth category all the text box should be active. below is my code please help

    $(document).on('change''#combo'function(){  
  2.         var shouldEnable = $(this).val() !== 'Men';  
  3.         $('#input1').prop('disabled', shouldEnable);  
  4.         }); 
  1. <div class="form-group">  
  2.                 <label for="category" class="col-sm-2 control-label">Group Category</label>  
  3.                 <div class="col-sm-3">  
  4.                      <select class="form-control" name="category"  id="combo">  
  5.                      <option value="">Select Category</option>  
  6.                      <option value="Men">Men</option>  
  7.                      <option value="Women">Women</option>  
  8.                      <option value="Youth">Youth</option>  
  9.                      <option value="Both">Both</option>  
  10.                      </select>  
  11.                 </div>  
  12.                 </div>  
  13.                   
  14.                 <div class="form-group">  
  15.                 <label for="name" class="col-sm-2 control-label">Number Of Men</label>  
  16.                 <div class="col-sm-8">  
  17.                 <input type='text' size='5' name="man" id="input1" value="" class='input' disabled></input>  
  18.                 </div>  
  19.                 </div>  
  20.                   
  21.                 <div class="form-group">  
  22.                 <label for="name" class="col-sm-2 control-label">Number Of Women</label>  
  23.                 <div class="col-sm-8">  
  24.                 <input type='text' size='5' name="woman" id="input2" value="" class='input' disabled></input>  
  25.                 </div>  
  26.                 </div> 

Answers (3)