单选按钮被禁用，即使在选择其他按钮后也不会启用

我正在尝试创建一个无线电选择按钮，我希望用户为特定主题选择特定号码。例如，如果受访者选择了初创公司或敏捷的新竞争对手= 1，则后续话题的全部1被禁用。单选按钮被禁用，即使在选择其他按钮后也不会启用

我已经实现了该功能，但是如果我想将先前选择的1选项更改为某个相同主题的另一个选项，我可以这样做，但1不会在选择另一个选项时自动激活，它保持禁用状态。

下面是什么，我想实现图片..那里你可以看到我有选择2在第一个选项，但仍所有的1个单选按钮被禁用。我希望全部1个按钮在我选择其他按钮后立即激活。

下面是代码：

$(document).ready(function() { 
$(".question tbody tr td").on('click', function() { 
    var val, 
     i, 
     inputVal; 
    $(this).addClass("checked"); 
    if ($(this).hasClass("checked")) { 
     val = document.querySelectorAll("td"); 
     val = Array.prototype.slice.call(val); 
     val.splice(0,1); 
     inputVal = $(this).find("input").val(); 
     $(".question tbody tr td").find("input[value="+inputVal+"]").attr('disabled',true); 
    } 
}) 
});

添加表结构..记住表结构不能改变

<tr id="javatbd572915X2X209SQ001" class="answers-list radio-list array2"> 
    <th class="answertext" width="20%"> 

     Start-Ups or agile new competitors 
     <input type="hidden" name="java572915X2X209SQ001" id="java572915X2X209SQ001" value="1"> 

    </th> 
    <td class="answer_cell_001 answer-item radio-item" title="1"> 

     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-1" value="1" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-1">1</label> 

    </td> 
    <td class="answer_cell_002 answer-item radio-item" title="2"> 

     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-2" value="2" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-2">2</label> 

    </td> 
    <td class="answer_cell_003 answer-item radio-item" title="3"> 

     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-3" value="3" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-3">3</label> 

    </td> 
    <td class="answer_cell_004 answer-item radio-item" title="4"> 

     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-4" value="4" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-4">4</label> 

    </td> 
    <td class="answer_cell_005 answer-item radio-item" title="5"> 

     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-5" value="5" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-5">5</label> 

    </td> 
</tr>

来源

2015-07-28 ChanX

检查你单选按钮具有相同的“名称”值。 –

对于同一行是。Ex对于Start-Up主题中的所有单选按钮都是一样的，对于灵活或移动工作，其全部相同，但对主题本身不同。例如，如果Startup的名称为5X4X，则所有的1,2,3,4,5按钮都有相同的名称。同样，如果Flexible具有5X5X的名称，则所有Flex的1,2,3,4,5按钮具有相同的名称.. – ChanX

你可以添加你的单选按钮结构的问题 –

我看到的唯一问题是，你不启用旧的禁用的新值（和复选框）。现在，您的代码在单击单元格时执行此操作：

将checked类添加到单元格。
使用新值禁用所有input。

您需要修改它，所以它具有以下功能：

取出checked类到当前检查电池
与旧值启用所有input秒。
将checked类添加到当前单元格。
使用新值禁用所有input。

所以修改尽可能少的代码，它应该是这样的：

function checkconditions() { 
 
} 
 

 
$(document).ready(function() { 
 
    $(".question tbody tr td").on('click', function() { 
 
     var val, i, inputVal; 
 
     
 
     // reactivate the previously selected one (remove the check class) 
 
     var prevSelected = $(this).parent().find(".checked").removeClass("checked").attr("title"); 
 
     if (prevSelected) { 
 
      // enable again the checkboxes with that value 
 
      $(this).parent().parent().find("input[type='radio'][value='" + prevSelected + "']").prop("disabled", false); 
 
     } 
 
     
 
     // unmodified code 
 
     $(this).addClass("checked"); 
 
     if ($(this).hasClass("checked")) { 
 
      val = document.querySelectorAll("td"); 
 
      val = Array.prototype.slice.call(val); 
 
      val.splice(0,1); 
 
      inputVal = $(this).find("input").val(); 
 
      $(".question tbody tr td").find("input[value="+inputVal+"]").attr('disabled',true); 
 
     } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="question"> 
 
    <table> 
 
    <tbody> 
 
     <tr id="javatbd572915X2X209SQ001" class="answers-list radio-list array2"> 
 
     <th class="answertext" width="20%"> 
 

 
      Option 1 
 
      <input type="hidden" name="java572915X2X209SQ001" id="java572915X2X209SQ001" value="1"/> 
 

 
     </th> 
 
     <td class="answer_cell_001 answer-item radio-item" title="1"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-1" value="1" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ001-1">1</label> 
 

 
     </td> 
 
     <td class="answer_cell_002 answer-item radio-item" title="2"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-2" value="2" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ001-2">2</label> 
 

 
     </td> 
 
     <td class="answer_cell_003 answer-item radio-item" title="3"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-3" value="3" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ001-3">3</label> 
 

 
     </td> 
 
     <td class="answer_cell_004 answer-item radio-item" title="4"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-4" value="4" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ001-4">4</label> 
 

 
     </td> 
 
     <td class="answer_cell_005 answer-item radio-item" title="5"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-5" value="5" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ001-5">5</label> 
 

 
     </td> 
 
     </tr> 
 

 

 

 
     <tr id="javatbd572915X2X209SQ001" class="answers-list radio-list array2"> 
 
     <th class="answertext" width="20%"> 
 

 
      Option 2 
 
      <input type="hidden" name="java572915X2X209SQ001" id="java572915X2X209SQ001" value="1"/> 
 

 
     </th> 
 
     <td class="answer_cell_001 answer-item radio-item" title="1"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ002" id="answer572915X2X209SQ002-1" value="1" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ002-1">1</label> 
 

 
     </td> 
 
     <td class="answer_cell_002 answer-item radio-item" title="2"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ002" id="answer572915X2X209SQ002-2" value="2" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ002-2">2</label> 
 

 
     </td> 
 
     <td class="answer_cell_003 answer-item radio-item" title="3"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ002" id="answer572915X2X209SQ002-3" value="3" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ002-3">3</label> 
 

 
     </td> 
 
     <td class="answer_cell_004 answer-item radio-item" title="4"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ002" id="answer572915X2X209SQ002-4" value="4" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ002-4">4</label> 
 

 
     </td> 
 
     <td class="answer_cell_005 answer-item radio-item" title="5"> 
 

 
      <input class="radio" type="radio" name="572915X2X209SQ002" id="answer572915X2X209SQ002-5" value="5" onclick="checkconditions(this.value, this.name, this.type)"/><label class="hide read" for="answer572915X2X209SQ002-5">5</label> 
 

 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

你也可以看到它正在研究这个的jsfiddle：http://jsfiddle.net/93o83jsu/

来源

2015-07-28 15:49:00

由于我在上面评论中，代码中没有使用'val'（至少不在此代码段中）。我只是离开了它，所以我尽量保持代码尽可能靠近原始位置（以防其他地方使用它）。 –

thanx的解决方案..你的代码是最好的，工作的.. – ChanX

您可以尝试删除类“选中”的所有行之前做动作“点击” 类似这样的：

$(document).ready(function() { 
    $(".question tbody tr td").on('click', function() { 
     $(this).parent().find('td').removeClass('checked'); 
     $(this).parent().find('input').removeAttr('disabled'); 
     $(this).addClass('checked'); 
     //you do not need if expr because it will always true 
     $(this).find("input").attr('disabled',true); 
    }); 
});

但是......为什么？你可以在radio输入和css选择器中使用“name”属性：检查它。

来源

2015-07-28 12:18:40 futualien

因为..我正在修改一个石灰调查问题，并添加此行为，如果任何单选按钮被选中，例如，如果选择1，然后禁用1的所有行动..石灰调查指派'td'元素'检查'元素每次我选择一个按钮。 – ChanX

$(document).ready(function() { 
 
    var $cellSelector=$("#myTable tr td"); 
 
$cellSelector.on('click', function() { 
 
    
 
    var val, 
 
     i, 
 
     inputVal; 
 
    $(this).addClass("checked"); 
 
    if ($(this).hasClass("checked")) { 
 
     val = document.querySelectorAll("td"); 
 
     val = Array.prototype.slice.call(val); 
 
     val.splice(0,1); 
 
     inputVal = $(this).find("input").val(); 
 
     
 
     
 
     $cellSelector.find("input[value="+inputVal+"]") 
 
     .attr('disabled',true); 
 
     
 
     // To enable all other checkboxes 
 
     $cellSelector.find("input:not([value="+inputVal+"])") 
 
     .attr('disabled',false); 
 
    } 
 
}) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<style> 
 
.red{ 
 
    background-color:red; 
 
} 
 
</style> 
 
<table id="myTable"> 
 

 
<tr id="javatbd572915X2X209SQ001" class="answers-list radio-list array2"> 
 
    <th class="answertext" width="20%"> 
 

 
     Start-Ups or agile new competitors 
 
     <input type="hidden" name="java572915X2X209SQ001" id="java572915X2X209SQ001" value="1"> 
 

 
    </th> 
 
    <td class="answer_cell_001 answer-item radio-item" title="1"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-1" value="1" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-1">1</label> 
 

 
    </td> 
 
    <td class="answer_cell_002 answer-item radio-item" title="2"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-2" value="2" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-2">2</label> 
 

 
    </td> 
 
    <td class="answer_cell_003 answer-item radio-item" title="3"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-3" value="3" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-3">3</label> 
 

 
    </td> 
 
    <td class="answer_cell_004 answer-item radio-item" title="4"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-4" value="4" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-4">4</label> 
 

 
    </td> 
 
    <td class="answer_cell_005 answer-item radio-item" title="5"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-5" value="5" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-5">5</label> 
 

 
    </td> 
 
</tr> 
 
    
 
<tr id="javatbd572915X2X209SQ001" class="answers-list radio-list array2"> 
 
    <th class="answertext" width="20%"> 
 

 
    Some other Topic 
 
     <input type="hidden" name="java572915X2X209SQ002" id="java572915X2X209SQ001" value="1"> 
 
    </th> 
 
    <td class="answer_cell_001 answer-item radio-item" title="1"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-1" value="1" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-1">1</label> 
 

 
    </td> 
 
    <td class="answer_cell_002 answer-item radio-item" title="2"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-2" value="2" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-2">2</label> 
 

 
    </td> 
 
    <td class="answer_cell_003 answer-item radio-item" title="3"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-3" value="3" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-3">3</label> 
 

 
    </td> 
 
    <td class="answer_cell_004 answer-item radio-item" title="4"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-4" value="4" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-4">4</label> 
 

 
    </td> 
 
    <td class="answer_cell_005 answer-item radio-item" title="5"> 
 

 
     <input class="radio" type="radio" name="572915X2X209SQ001" id="answer572915X2X209SQ001-5" value="5" onclick="checkconditions(this.value, this.name, this.type)"><label class="hide read" for="answer572915X2X209SQ001-5">5</label> 
 

 
    </td> 
 
</tr> 
 
</table>

请试试这个

来源

2015-07-28 12:54:01

如果我检查第一个答案，然后再检查第二个答案，它会取消选中我的第一个答案检查..我想让第一个答案保持原样。例如，如果我选择1，那么启动时会选择1其他话题被禁用，而其余的都是启用的，我应该可以检查其他话题的收音箱，而不必取消选中启动单选按钮。现在我只能检查一个答案。 – ChanX

而另一个tr有不同的编号 – ChanX

单选按钮被禁用，即使在选择其他按钮后也不会启用

回答

相关问题