單選按鈕被禁用，即使在選擇其他按鈕後也不會啓用

我正在嘗試創建一個無線電選擇按鈕，我希望用戶爲特定主題選擇特定號碼。例如，如果受訪者選擇了初創公司或敏捷的新競爭對手= 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

單選按鈕被禁用，即使在選擇其他按鈕後也不會啓用

回答

相關問題