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

The only issue I see is that you are disabling the new values (and checkboxes) without enabling the old ones. Right now your code does this when a cell is clicked:

Add checked class to the cell.
Disable all the inputs with the new value.

You need to modify it so it does the following:

Remove the checked class to the currently checked cell
Enable all inputs with the old value.
Add checked class to the current cell.
Disable all the inputs with the new value.

So modifying as little as possible your code, it would look like this:

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>

You can also see it working on this JSFiddle: http://jsfiddle.net/93o83jsu/

Answer 2

您可以尝试删除所有行中的“已选中”类，然后执行操作“点击” 像这样：

$(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);
    });
});

但是......为什么？你可以在无线电输入和css-selector中使用“name”属性：检查它。

Answer 3

$(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>

请试一试

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

3 个答案: