如何限制单选按钮的选择一次

jsfiddle: http://jsfiddle.net/mgvto6k1/10/

您可以通过在单击处理程序的末尾添加$("input", $(this).parents("div")).attr("disabled", true);行来禁用此无线电。

但是，这种方式是不安全的!任何人都可以重新启用单选按钮(或重新附加事件)，您也应该添加一些服务器端检查。

$('.stars input:radio').click(function() {
  str_rate = $(this).closest('div').find('span.rate');
  var rate_string = $(str_rate).text();
  var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1, rate_string.indexOf(")")), 10) + 1;
  $(str_rate).text("Rate! (" + rate + ")");
  $("input", $(this).parents("div")).attr("disabled", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stars float-left">
  <div class="rating" style="width:99%"></div>
  <p>
    <input type="radio" name="rating" id="star5" value="5" />
    <label for="star5"></label>
    <input type="radio" name="rating" id="star4" value="4">
    <label for="star4"></label>
    <input type="radio" name="rating" id="star3" value="3" />
    <label for="star3"></label>
    <input type="radio" name="rating" id="star2" value="2">
    <label for="star2"></label>
    <input type="radio" name="rating" id="star1" value="1" />
    <label for="star1"></label>
  </p>
  <span class="rate">Rate! (62)</span>
</div>
<div class="stars float-left">
  <div class="rating" style="width:99%"></div>
  <p>
    <input type="radio" name="rating" id="star5" value="5" />
    <label for="star5"></label>
    <input type="radio" name="rating" id="star4" value="4">
    <label for="star4"></label>
    <input type="radio" name="rating" id="star3" value="3" />
    <label for="star3"></label>
    <input type="radio" name="rating" id="star2" value="2">
    <label for="star2"></label>
    <input type="radio" name="rating" id="star1" value="1" />
    <label for="star1"></label>
  </p>
  <span class="rate">Rate! (20)</span>
</div>

如果单选按钮被选中，您需要确保您的事件仅触发。我将你的代码修改如下:(http://jsfiddle.net/mgvto6k1/7/)

$('input:radio[name="rating"]').change(
    function(){
        if ($(this).is(':checked')) {
           str_rate = $(this).closest('div').find('span.rate');
    var rate_string = $(str_rate).text();
    var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1,rate_string.indexOf(")")),10) + 1;
    $(str_rate).text("Rate! (" + rate + ")");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="stars float-left">
    <div class="rating" style="width:99%"></div>
       <p><input type="radio" name="rating" id="star5" value="5" /><label for="star5"></label><input type="radio" name="rating" id="star4" value="4"><label for="star4"></label><input type="radio" name="rating" id="star3" value="3" /><label for="star3"></label><input type="radio" name="rating" id="star2" value="2"><label for="star2"></label><input type="radio" name="rating" id="star1" value="1" /><label for="star1"></label>
    </p>
    <span class="rate">Rate! (62)</span>
</div>
           
              <div class="stars float-left">
    <div class="rating" style="width:99%"></div>
       <p><input type="radio" name="rating" id="star5" value="5" /><label for="star5"></label><input type="radio" name="rating" id="star4" value="4"><label for="star4"></label><input type="radio" name="rating" id="star3" value="3" /><label for="star3"></label><input type="radio" name="rating" id="star2" value="2"><label for="star2"></label><input type="radio" name="rating" id="star1" value="1" /><label for="star1"></label>
    </p>
    <span class="rate">Rate! (20)</span>
</div>

如果我认为我理解你的问题，你想只增加计数器一次每一行复选框?选中复选框后，您将希望解除对单击处理程序的绑定。我在提供的代码片段

$('.stars input:radio').click(function () {
    str_rate = $(this).closest('div').find('span.rate');
    var rate_string = $(str_rate).text();
    var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1, rate_string.indexOf(")")), 10) + 1;
    $(str_rate).text("Rate! (" + rate + ")");
    $(this).siblings('input').unbind('click');
});

<div class="stars float-left">
    <div class="rating" style="width:99%"></div>
    <p>
        <input type="radio" name="rating" id="star5" value="5" />
        <label for="star5"></label>
        <input type="radio" name="rating" id="star4" value="4">
        <label for="star4"></label>
        <input type="radio" name="rating" id="star3" value="3" />
        <label for="star3"></label>
        <input type="radio" name="rating" id="star2" value="2">
        <label for="star2"></label>
        <input type="radio" name="rating" id="star1" value="1" />
        <label for="star1"></label>
    </p> <span class="rate">Rate! (62)</span>
</div>
<div class="stars float-left">
    <div class="rating" style="width:99%"></div>
    <p>
        <input type="radio" name="rating" id="star5" value="5" />
        <label for="star5"></label>
        <input type="radio" name="rating" id="star4" value="4">
        <label for="star4"></label>
        <input type="radio" name="rating" id="star3" value="3" />
        <label for="star3"></label>
        <input type="radio" name="rating" id="star2" value="2">
        <label for="star2"></label>
        <input type="radio" name="rating" id="star1" value="1" />
        <label for="star1"></label>
    </p> <span class="rate">Rate! (20)</span>
</div>

一旦用户做出决定，你可以禁用单选按钮组

$('.stars input:radio').click(function() {
    str_rate = $(this).closest('div').find('span.rate');
    var rate_string = $(str_rate).text();
    var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1,rate_string.indexOf(")")),10) + 1;
    $(str_rate).text("Rate! (" + rate + ")");
    $(this).siblings().attr("disabled", "true");
});

看看更新的fiddle如果这是你所寻找的，你只需要禁用单选按钮后的比率，所以像这样的用户可以只评级一次，添加以下代码:

$(this).siblings().attr("disabled", "disabled");

完整JS:

$('.stars input:radio').click(function() {
    str_rate = $(this).closest('div').find('span.rate');
    var rate_string = $(str_rate).text();
    var rate = parseInt(rate_string.substring(rate_string.indexOf("(") + 1,rate_string.indexOf(")")),10) + 1;
    $(str_rate).text("Rate! (" + rate + ")");
    $(this).siblings().attr("disabled", "disabled");
});