javascript - 是否可以根据以前的单选按钮限制单选按钮选择？

Question

基本上我有一个调查，我希望人们根据重要性对 5 个项目 1-5 进行排名。

这是 HTML：http: //jsfiddle.net/madcaesar/jj8ky/

<form>
    <table>
    <tr>
                    <th colspan="2" class="altTH" style="text-align:left">Please rank, in order of most important (1) to least important (5)</th>
                  </tr>
                  <tr>
                    <th><label>Professionalism (promoting the profession of medicine)</label></th>
                    <td>
                        <label style="display:inline"><input type="radio" name="Professionalism" value="1" class="checkbox"/> 1</label>
                        <label style="display:inline"><input type="radio" name="Professionalism" value="2" class="checkbox"/> 2</label>
                        <label style="display:inline"><input type="radio" name="Professionalism" value="3" class="checkbox"/> 3</label>
                        <label style="display:inline"><input type="radio" name="Professionalism" value="4" class="checkbox"/> 4</label>
                        <label style="display:inline"><input type="radio" name="Professionalism" value="5" class="checkbox"/> 5</label>
                    </td>
                  </tr>
                  <tr>
                    <th><label>Government Relations (state and federal government advocacy)</label></th>
                    <td>
                        <label style="display:inline"><input type="radio" name="GovernmentRelations" value="1" class="checkbox"/> 1</label>
                        <label style="display:inline"><input type="radio" name="GovernmentRelations" value="2" class="checkbox"/> 2</label>
                        <label style="display:inline"><input type="radio" name="GovernmentRelations" value="3" class="checkbox"/> 3</label>
                        <label style="display:inline"><input type="radio" name="GovernmentRelations" value="4" class="checkbox"/> 4</label>
                        <label style="display:inline"><input type="radio" name="GovernmentRelations" value="5" class="checkbox"/> 5</label>
                    </td>
                  </tr><tr>
                    <th><label>Education (e.g. CME, staff training, meetings)</label></th>
                    <td>
                        <label style="display:inline"><input type="radio" name="Education" value="1" class="checkbox"/> 1</label>
                        <label style="display:inline"><input type="radio" name="Education" value="2" class="checkbox"/> 2</label>
                        <label style="display:inline"><input type="radio" name="Education" value="3" class="checkbox"/> 3</label>
                        <label style="display:inline"><input type="radio" name="Education" value="4" class="checkbox"/> 4</label>
                        <label style="display:inline"><input type="radio" name="Education" value="5" class="checkbox"/> 5</label>
                    </td>
                  </tr>
                  <tr>
                    <th><label>Regulatory and legal analysis and support</label></th>
                    <td>
                        <label style="display:inline"><input type="radio" name="Regulatory" value="1" class="checkbox"/> 1</label>
                        <label style="display:inline"><input type="radio" name="Regulatory" value="2" class="checkbox"/> 2</label>
                        <label style="display:inline"><input type="radio" name="Regulatory" value="3" class="checkbox"/> 3</label>
                        <label style="display:inline"><input type="radio" name="Regulatory" value="4" class="checkbox"/> 4</label>
                        <label style="display:inline"><input type="radio" name="Regulatory" value="5" class="checkbox"/> 5</label>
                    </td>
                  </tr>
                  <tr>
                    <th><label>Communications (Iowa Medicine magazine, website, media relations, etc.)</label></th>
                    <td>
                        <label style="display:inline"><input type="radio" name="Communications" value="1" class="checkbox"/> 1</label>
                        <label style="display:inline"><input type="radio" name="Communications" value="2" class="checkbox"/> 2</label>
                        <label style="display:inline"><input type="radio" name="Communications" value="3" class="checkbox"/> 3</label>
                        <label style="display:inline"><input type="radio" name="Communications" value="4" class="checkbox"/> 4</label>
                        <label style="display:inline"><input type="radio" name="Communications" value="5" class="checkbox"/> 5</label>
                    </td>
                  </tr>

</table>

</form>

一旦选择了 1，jQuery 是否可以使 1 不可用？和 2 一旦选择了 2 等等？现在他们可以选择他们想要的任何数字，我想不出办法做到这一点。

Answer 1

像这样的事情怎么样，如果您选择某个数字，它会取消选择任何其他具有相同值的数字？：

http://jsfiddle.net/jj8ky/2/

$("#radio_table").on("click", ".checkbox", function () {
    var $this = $(this);
    var all = $("#radio_table").find(".checkbox").not($this);
    var val = $this.val();

    if ($this.prop("checked") === true) {
        all.filter(function () {
            return $(this).val() === val;
        }).prop("checked", false);
    }
});

Answer 2

您可以在需要时禁用某些收音机：例如

if($("#radio").val()==2) $("#otherRadio").attr("disabled",true);