我正在尝试制作一个单选按钮,希望用户为特定主题选择特定数字。例如,如果受访者选择初创企业或敏捷新竞争对手 = 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>
最佳答案
我看到的唯一问题是您禁用新值(和复选框)而不启用旧值。现在,您的代码在单击单元格时执行此操作:
- 将
checked
类添加到单元格。 - 禁用所有具有新值的
输入
。
您需要对其进行修改,以便它执行以下操作:
- 将
checked
类移除到当前选中的单元格 - 使用旧值启用所有
输入
。 - 将
checked
类添加到当前单元格。 - 禁用所有具有新值的
输入
。
因此,尽可能少地修改代码,它看起来像这样:
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/
关于javascript - 单选按钮被禁用,即使选择另一个按钮后也无法启用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31675719/