There are 2 radio buttons #is_group_1 and #is_group_0 . When selecting #is_group_1 , the select #product_select must be removed from the #product_select attribute. And when selecting #is_group_0 , the disabled #product_select must be added to the #product_select attribute. The code works in one direction for some reason.

 var productType = $('#is_group_1'); var productSelect = $('#product_select'); productType.change(function(e) { e.preventDefault(); productSelect.prop('disabled', true); }, function() { productSelect.prop('disabled', false); });

I tried it this way, but it doesn't work that way either.

  var productType = $('#is_group_1'); var productSelect = $('#product_select'); if(productType.attr('checked') == 1) { productSelect.prop('disabled', false); } else { productSelect.prop('disabled', true); }
  • for example, because the change function takes only one parameter - Grundy
  • Updated, added another option. But with no plow at all - Alex_01
  • attribute value is always a string. - Grundy

2 answers 2

As you can see in the documentation for the change method : this method accepts only one handler function.

Therefore, when two functions are transferred, one will simply be ignored.

To fix, in a single handler just assign the value of the checked radio-button property. For example:

 productType.change(function(e) { e.preventDefault(); productSelect.prop('disabled', this.checked); });

As correctly noted in the adjacent response, the change event is triggered, it only works on the current item.

Since two radio buttons are used, in the change handler, it is enough just to check the id button being changed, if this button is responsible for deactivating, then you need to set the value to false , otherwise true .

For example:

 var productType = $('[name=radio1]'); var productSelect = $('#product_select'); productType.change(function(e) { e.preventDefault(); productSelect.prop('disabled', this.id === 'is_group_2'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id='product_select' disabled> <option>1</option> <option>1</option> <option>1</option> </select> <div> <input type="radio" name="radio1" id="is_group_1" />Вкл <br/> <input type="radio" name="radio1" id="is_group_2" checked/>Выкл </div>

    The .change method accepts only one handler function. In addition, when switching to another radio , the change event is triggered only for it, for an already marked radio event is not triggered.

    Therefore, I propose the following option: add the general class to the desired radio and mark additionally with the "on" и "off" classes, after which hang up the change event handler on the class rather than on id radio and check the presence of the off class in the handler using the .hasClass function ()

     var productType = $('.selectSwitcher'); var productSelect = $('#product_select'); productType.change(function(e) { e.preventDefault(); productSelect.prop('disabled', $(this).hasClass('off')); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id = 'product_select' disabled> <option>1</option> <option>1</option> <option>1</option> </select> <div> <input type="radio" name="radio1" class="selectSwitcher on" id="is_group_1"/> Вкл<br/> <input type="radio" name="radio1" class="selectSwitcher off" id="is_group_2"/> Выкл </div>