javascript - 使用jquery只选择下一个

Question

我需要一些帮助来解决这个问题。我有一个按钮 radio ，当这个按钮被选中时，他旁边的框必须更改 ID(是的 ID 不是类，绝对需要它是一个 ID)

<table>
<tr>
  <td>
    <input type="radio" class="attribute_radio" name="contenance" />
 </td>
 <td><a href="">A super link</a>
 </td>
 <td>                       
    <input type="number" name="qty" class="text" size="2" maxlength="3"/>
 </td>
</tr>
<tr>
   <td>
    <input type="radio" class="attribute_radio" name="contenance" />
 </td>
 <td><a href="">A super 2nd link</a>
 </td>
 <td>                       
    <input type="number" name="qty" class="text" size="2" maxlength="3"/>
 </td>
</tr>
</tr>

但是使用我编写的脚本，它将 ID 应用于所有数字框，而我只想要按钮单选框旁边的唯一一个

$(document).ready(function(){
$("input[type='radio']").click(function(){

    $("input[type='number']").attr('id', 'quantity_wanted');

});

});                                 

http://jsfiddle.net/micheler/y4jrotkc/4/

Answer 1

首先id必须是唯一的。我建议改用类。如果检查 radio ，我创建它来更改输入的 id:

$('input[type=radio]').click(function() {
  //remove all id from input number
  $('input[type=number]').removeAttr('id');
  //check if radio is checked and apply id to input number next to it
  if($(this).prop("checked"))
    $(this).next().attr('id', 'quantity_wanted')
});

#quantity_wanted {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page_navigation1">next</div>
<button id="add">Add</button>
<button id="remove">Remove</button>
<p>
  <input type="radio" class="attribute_radio" name="contenance" />
  <input type="number" id="" name="qty" class="text" size="2" maxlength="3" />
</p>
<p>
  <input type="radio" class="attribute_radio" name="contenance" />
  <input type="number" name="qty" class="text" size="2" maxlength="3" />
</p>