How to set disabled on multiple inputs in a form?

Question

JavaScript

Below is the code that shows or hides the div with inputs depending on the option selected by the user, but the form submits all the inputs, so that the inputs are not sent, you need to add the "disabled" attribute to each input inside the inactive div. Tried to chain $('#s>input').attr('disabled',true); to the selector doesn't work. In JS quite recently, I can not understand what the problem is.

<form>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      {{agent || "agent"}}
      <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#" ng-click="s=true;f=false;agent_type='s';">s</a></li>
        <li><a href="#" ng-click="f=true;s=false;gent_type='f';">f</a></li>
      </ul>
<div ng-show="s" id="s">
 <input type="text">
</div>
<div ng-show="f" id="f">
<input type="text">
</div>
</form>

Answer 1

The problem was solved by adding the ng-disabled attribute to the inputs, which checked the variables s and f, respectively, for true and false.

Answer 2

You can do this
. But I think the problem is either in the function call that makes disabled or in the selector (maybe in a live project, an additional wrapper for the field). Since $('#s>input').attr('disabled',true); should work. Can I see a live example?

Answer 3

1. Use ng-if instead of ng-show
2. If you need to disable a group of inputs, enclose them in a tag<fieldset ng-disabled="condition">