javascript - 单选按钮被禁用，即使选择另一个按钮后也无法启用

Question

我正在尝试制作一个单选按钮，希望用户为特定主题选择特定数字。例如，如果受访者选择初创企业或敏捷新竞争对手 = 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>

Answer 1

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

1. 将 checked 类添加到单元格。
2. 禁用所有具有新值的输入。

您需要对其进行修改，以便它执行以下操作:

1. 将 checked 类移除到当前选中的单元格
2. 使用旧值启用所有输入。
3. 将 checked 类添加到当前单元格。
4. 禁用所有具有新值的输入。

因此，尽可能少地修改代码，它看起来像这样:

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/