是否可以根据之前的单选按钮限制单选按钮的选择?

时间:2012-12-04 20:43:52

标签: javascript jquery forms

基本上我有一项调查,我希望人们根据重要性对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等等?现在他们可以选择他们想要的任何数字,我无法找到一种方法来做到这一点。

2 个答案:

答案 0 :(得分:3)

这样的事情怎么样,如果你选择某个数字,它会取消选择任何其他具有相同价值的数字?:

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

答案 1 :(得分:-1)

您可以在需要时禁用某些收音机:ex

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