CODEWITHSUNDEEP
jqueryhtml
Jimmy
Jimmy

Reputation: 119

jquery enabled/disabled radio relative to form

In my page I have multi form, when i click to radio button "disabled_radio" i would that radio button "radio_enabled_disabled" become disabled, but for relative form id. 

<td>
<form method="post" name="form1" id="form1" action="send.php">
   <div id="choice">
   <input type="radio" name="enabled_radio" value="yes" />YES
   <input type="radio" name="disabled_radio" value="no" />NO
   </div>
   <div id="mydiv">
   <input type="radio" name="radio_enabled_disabled" />
   </div>
</form>
</td>
<td>
<form method="post" name="form2" id="form2" action="send.php">
   <div id="choice">
   <input type="radio" name="enabled_radio" value="yes" />YES
   <input type="radio" name="disabled_radio" value="no" />NO
   </div>
   <div id="mydiv">
   <input type="radio" name="radio_enabled_disabled" />
   </div>
</form>
</td>

Upvotes: 1

Views: 111

Answers (2)

Lix
Lix

Reputation: 47966

You have some problems with your HTML, but I'm going to assume that this is just some example code you included to display what you are trying to do.

If your radio element is a child of the form you want to enable/disable, you can use the parent() function to go one level up in your DOM, and arrive at the form element.

$('input.disabled_radio').on('click',function(){
  $(this.parent().find('input[name="radio_enabled_disabled"]').prop('disabled','disabled');
});

This code will find the relative parent form element and set the disabled property for each input element contained within it.

Personally I like to be as verbose as I can with my code. I've found that this greatly increases readability. So I would recommend using jQuery's closest() function instead of parent(). The closest() function requires you to specify the type of parent element you are looking for. So the code would look something like this - 

$('input.disabled_radio').on('click',function(){
  $(this.closest('form').find('input[name="radio_enabled_disabled"]').prop('disabled','disabled');
});

Afterwards, to re-enable the radio button, you'll need to remove that disabled property. For that you can use this - 

.prop('disabled','');

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382132

First, you need a fixed HTML with no reused id and radio names used to group them :

<form method="post" name="form1" id="form1" action="send.php">
   <input type="radio" name="enable_radio" value="yes">YES
   <input type="radio" name="enable_radio" value="no">NO
   <input type="radio" name="radio_enabled_disabled">
</form>
<form method="post" name="form2" id="form2" action="send.php">
   <input type="radio" name="enable_radio" value="yes">YES
   <input type="radio" name="enable_radio" value="no">NO
   <input type="radio" name="radio_enabled_disabled">
</form>
<form method="post" name="form3" id="form3" action="send.php">
   <input type="radio" name="enable_radio" value="yes">YES
   <input type="radio" name="enable_radio" value="no">NO
   <input type="radio" name="radio_enabled_disabled">
</form>

Then you can do this :

$('[name=enable_radio]').change(function(){
    $(this).parent().find('[name="radio_enabled_disabled"]')
       .prop('disabled',this.value=='yes')
});

Demonstration

Upvotes: 1

Related Questions