0

I found the below code to enable and disable textbox based on the option button but i want to more than 20 fields like that.

I want to write lot of scripts for that, is there easy way to create 20 fields like that

Please any one help me regarding this 

$(window).load(function() {
  $(function() {
    window.invalidate_input = function() {
      if ($('input[name=opt13]:checked').val() == "Yes")
        $('#others').removeAttr('disabled');
      else
        $('#others').attr('disabled', 'disabled');
    };

    $("input[name=opt13]").change(invalidate_input);

    invalidate_input();
  });
}); //]]>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<label>Did you study any school</label>&nbsp&nbsp
<input type='radio' name='opt13' value='Yes' id="" />Yes
<input type='radio' name='opt13' value='No' id="" />Others</td>
<br />
<br />
<label>Enter MatexBranch:</label>&nbsp;&nbsp;
<input type="textbox" name="others" id="others" />
Rajesh
  • 24,354
  • 5
  • 48
  • 79
sansan
  • 783
  • 1
  • 6
  • 21
  • First this is not a good approach. `window.load` has `$(function(){})`. Why... – Rajesh Feb 02 '17 at 06:42
  • `for` or `foreach` or `$.each` or any one of a number of ways to iterate over variables would work if you parametrise your variables. If this is a fairly long/complex form with validation and conditional formatting, perhaps have a look at this [question about generating forms based off JSON or XML](http://stackoverflow.com/q/12905849/648350) – haxxxton Feb 02 '17 at 06:48
  • @haxxxton Its better to use more generic code and using `this` to find element to be manipulated. – Rajesh Feb 02 '17 at 06:55
  • @Rajesh, my misunderstanding about what OP meant by "fields _LIKE_ this", rather than identical except for `name`.. I assumed they wanted a more robust form building solution that something so specific to the html structure provided. – haxxxton Feb 02 '17 at 07:20

2 Answers2

1

First, to make code reusable, remove any specific code like $("#..."). Instead, navigate to element using this. For this, you can use .siblings function of jquery.

Also there is not need for if...else. You can set value as true or false to enable/ disable element.

Also, instead of binding change on radio using name, do it using a combination of selector as name will be different for every group.

$(function() {
  var invalidate_input = function() {
    $(this).siblings('.input-value').attr('disabled', $(this).val() !== "Yes");
  };

  $(".section input[type='radio']").on("change", invalidate_input);
});
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>

<div class="section">
  <label>Did you study any school</label>&nbsp&nbsp
  <input type='radio' name='opt13' value='Yes' id="" />Yes
  <input type='radio' name='opt13' value='No' id="" />Others</td>
  <br />
  <br />
  <label>Enter MatexBranch:</label>&nbsp;&nbsp;
  <input type="textbox" name="others" class="input-value" />
</div>

<div class="section">
  <label>Did you study any school</label>&nbsp&nbsp
  <input type='radio' name='opt14' value='Yes' id="" />Yes
  <input type='radio' name='opt14' value='No' id="" />Others</td>
  <br />
  <br />
  <label>Enter MatexBranch:</label>&nbsp;&nbsp;
  <input type="textbox" name="others" class="input-value" />
</div>
Rajesh
  • 24,354
  • 5
  • 48
  • 79
0

You could like this, creating a jQuery object of each radio/checkbox element. And adding a data attribute (in this case data-target) where you fill in an id or classname for the target input field. In this case you don't need to have them as siblings.

var toggleInput = {
    init: function() {
         var $toggles = $('.js-toggle-input');

         $toggles.each(function(index, elem) {
              var $elem = $(elem);

              $elem.on('change', function(e) {
                   var currentTarget = $(e.currentTarget);
                   var targetInputField = currentTarget.data('target');

                   if ( currentTarget.is(':checked') && currentTarget.val() == "Yes") {
                       $(targetInputField).remoeAttr('disabled');
                   } else {
                       $(targetInputField).attr('disabled', 'disabled');
                   }
              });
         });
    }
}

$(function() {
    toggleInput.init();
});

  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<label>Did you study any school </label> &nbsp&nbsp
<input type='radio' name='opt13' value='Yes' id="" class="js-toggle-input" data-target="#others"/>Yes
<input type='radio' name='opt13' value='No' id="" class="js-toggle-input" data-target="#others"/>Others</td>
<br /><br />
<label>Enter MatexBranch: </label> &nbsp;&nbsp;
<input type="textbox" name="others" id="others" />

Working here: https://jsfiddle.net/djr9g0dc/2/

Remco Abalain
  • 98
  • 5