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

Question

我试图限制this jsfiddle中的多次计数。因此，一旦我通过选择单选按钮进行评级，我想存储此信息，以便计数器不会添加更多＆＃34;费率＆＃34;。我怎样才能限制eace计数器只上一次？

HTML：

SELECT f.*
FROM
    (SELECT t1.* ,
          (SELECT count(*)
           FROM table t2
           WHERE (t2.title <= t1.title) 
           AND (t1.groups = t2.groups)) AS groupNo
     FROM table t1
     WHERE MATCH (t1.title) AGAINST ('marka tv')
     ) AS f
ORDER BY groupNo, groups

JS：

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

Answer 1

如果选中了单选按钮，则需要确保您的事件触发仅。我修改了您的代码，如下所示：（http://jsfiddle.net/mgvto6k1/7/）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

看看 Updated 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");
});

希望这能回答你的问题。

Answer 3

如果我认为我理解你的问题，你只想在每行复选框中增加一次计数器？一旦选中了复选框，您将需要取消绑定点击处理程序。我已在提供的代码段中进行了更改

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

所以你的代码现在看起来像：

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

Answer 5

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>