如果值相同，我们如何修复单选按钮不应该被选中

时间：2016-10-11 02:22:30

标签： jquery jquery-ui

如果jquery ui按钮设置中有两个单选按钮值相同，我有问题是控制单选按钮不被选中。

这是我的代码：

＆＃13;
＆＃13; 
$(document).ready(function() {
  var selected = {};
  $(".rating input[type='radio']").each(function() {
    selected[$(this).attr("name")] = null;
  });
  $(".rating").buttonset();
  $(".rating input[type='radio']").on('click', function() {
    $(".error").text("").hide();
    var ci = $(this).attr("name");
    var cv = parseInt($(this).val());
    selected[ci] = cv;
    $.each(selected, function(key, val) {
      if (key != ci) {
        if (val == cv) {
          $(this).parent().find('label').removeClass('ui-state-active');
          selected[ci] = null;
          $('.error').text('You have already chossen rating ' + cv).show();
        }
      }
    });
    return false;
  });
});
＆＃13; 
.hidden {
  border: 1px dashed #ccc;
  color: #ccc;
  min-height: 1em;
  margin: 5px;
  padding: 3px;
}

.error {
  display: none;
  border: 1px dashed red;
  min-height: 1em;
  margin: 5px;
  padding: 3px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="rating">
  <input type="radio" id="ss01" name="ss" value="1">
  <label for="ss01">1</label>
  <input type="radio" id="ss02" name="ss" value="2">
  <label for="ss02">2</label>
  <input type="radio" id="ss03" name="ss" value="3">
  <label for="ss03">3</label>
  <input type="radio" id="ss04" name="ss" value="4">
  <label for="ss04">4</label>
  <input type="radio" id="ss05" name="ss" value="5">
  <label for="ss05">5</label>
  <input type="radio" id="ss06" name="ss" value="6">
  <label for="ss06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="sobv01" name="sobv" value="1">
  <label for="sobv01">1</label>
  <input type="radio" id="sobv02" name="sobv" value="2">
  <label for="sobv02">2</label>
  <input type="radio" id="sobv03" name="sobv" value="3">
  <label for="sobv03">3</label>
  <input type="radio" id="sobv04" name="sobv" value="4">
  <label for="sobv04">4</label>
  <input type="radio" id="sobv05" name="sobv" value="5">
  <label for="sobv05">5</label>
  <input type="radio" id="sobv06" name="sobv" value="6">
  <label for="sobv06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="scs01" name="scs" value="1">
  <label for="scs01">1</label>
  <input type="radio" id="scs02" name="scs" value="2">
  <label for="scs02">2</label>
  <input type="radio" id="scs03" name="scs" value="3">
  <label for="scs03">3</label>
  <input type="radio" id="scs04" name="scs" value="4">
  <label for="scs04">4</label>
  <input type="radio" id="scs05" name="scs" value="5">
  <label for="scs05">5</label>
  <input type="radio" id="scs06" name="scs" value="6">
  <label for="scs06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="roc01" name="roc" value="1">
  <label for="roc01">1</label>
  <input type="radio" id="roc02" name="roc" value="2">
  <label for="roc02">2</label>
  <input type="radio" id="roc03" name="roc" value="3">
  <label for="roc03">3</label>
  <input type="radio" id="roc04" name="roc" value="4">
  <label for="roc04">4</label>
  <input type="radio" id="roc05" name="roc" value="5">
  <label for="roc05">5</label>
  <input type="radio" id="roc06" name="roc" value="6">
  <label for="roc06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="icl01" name="icl" value="1">
  <label for="icl01">1</label>
  <input type="radio" id="icl02" name="icl" value="2">
  <label for="icl02">2</label>
  <input type="radio" id="icl03" name="icl" value="3">
  <label for="icl03">3</label>
  <input type="radio" id="icl04" name="icl" value="4">
  <label for="icl04">4</label>
  <input type="radio" id="icl05" name="icl" value="5">
  <label for="icl05">5</label>
  <input type="radio" id="icl06" name="icl" value="6">
  <label for="icl06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="nlg01" name="nlg" value="1">
  <label for="nlg01">1</label>
  <input type="radio" id="nlg02" name="nlg" value="2">
  <label for="nlg02">2</label>
  <input type="radio" id="nlg03" name="nlg" value="3">
  <label for="nlg03">3</label>
  <input type="radio" id="nlg04" name="nlg" value="4">
  <label for="nlg04">4</label>
  <input type="radio" id="nlg05" name="nlg" value="5">
  <label for="nlg05">5</label>
  <input type="radio" id="nlg06" name="nlg" value="6">
  <label for="nlg06">6</label>
</div>
<br />
<div id="results" class="hidden">
</div>
<div id="errors" class="error">
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

根据你想做的事情，我想出了下面的内容，我禁用了已经检查过值的按钮。

有可能无法再更改答案（如果已经选择了所有数字）

$(".rating").buttonset();

$('body')
  .on('click', '.rating :radio', function(e) {
    var $this = $(this);

    // Enable all radio buttons
    $('.rating [disabled]:radio').prop('disabled', false);

    // Disable all buttons with values already selected
    $('.rating :checked').each(function() {
      $('.rating [value=' + $(this).attr('value') + ']:radio').not(this)
        .prop('checked', false)
        .attr('disabled', true);
    });

    // Refresh jQuery UI buttonset
    $('.rating').buttonset('refresh');
  })
  // Reset button
  .on('click', '#reset', function(e) {
    $('.rating :radio')
      .prop('disabled', false)
      .prop('checked', false);

    $('.rating').buttonset('refresh');
  });
.hidden {
  border: 1px dashed #ccc;
  color: #ccc;
  min-height: 1em;
  margin: 5px;
  padding: 3px;
}
.error {
  display: none;
  border: 1px dashed red;
  min-height: 1em;
  margin: 5px;
  padding: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="rating">
  <input type="radio" id="ss01" name="ss" value="1">
  <label for="ss01">1</label>
  <input type="radio" id="ss02" name="ss" value="2">
  <label for="ss02">2</label>
  <input type="radio" id="ss03" name="ss" value="3">
  <label for="ss03">3</label>
  <input type="radio" id="ss04" name="ss" value="4">
  <label for="ss04">4</label>
  <input type="radio" id="ss05" name="ss" value="5">
  <label for="ss05">5</label>
  <input type="radio" id="ss06" name="ss" value="6">
  <label for="ss06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="sobv01" name="sobv" value="1">
  <label for="sobv01">1</label>
  <input type="radio" id="sobv02" name="sobv" value="2">
  <label for="sobv02">2</label>
  <input type="radio" id="sobv03" name="sobv" value="3">
  <label for="sobv03">3</label>
  <input type="radio" id="sobv04" name="sobv" value="4">
  <label for="sobv04">4</label>
  <input type="radio" id="sobv05" name="sobv" value="5">
  <label for="sobv05">5</label>
  <input type="radio" id="sobv06" name="sobv" value="6">
  <label for="sobv06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="scs01" name="scs" value="1">
  <label for="scs01">1</label>
  <input type="radio" id="scs02" name="scs" value="2">
  <label for="scs02">2</label>
  <input type="radio" id="scs03" name="scs" value="3">
  <label for="scs03">3</label>
  <input type="radio" id="scs04" name="scs" value="4">
  <label for="scs04">4</label>
  <input type="radio" id="scs05" name="scs" value="5">
  <label for="scs05">5</label>
  <input type="radio" id="scs06" name="scs" value="6">
  <label for="scs06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="roc01" name="roc" value="1">
  <label for="roc01">1</label>
  <input type="radio" id="roc02" name="roc" value="2">
  <label for="roc02">2</label>
  <input type="radio" id="roc03" name="roc" value="3">
  <label for="roc03">3</label>
  <input type="radio" id="roc04" name="roc" value="4">
  <label for="roc04">4</label>
  <input type="radio" id="roc05" name="roc" value="5">
  <label for="roc05">5</label>
  <input type="radio" id="roc06" name="roc" value="6">
  <label for="roc06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="icl01" name="icl" value="1">
  <label for="icl01">1</label>
  <input type="radio" id="icl02" name="icl" value="2">
  <label for="icl02">2</label>
  <input type="radio" id="icl03" name="icl" value="3">
  <label for="icl03">3</label>
  <input type="radio" id="icl04" name="icl" value="4">
  <label for="icl04">4</label>
  <input type="radio" id="icl05" name="icl" value="5">
  <label for="icl05">5</label>
  <input type="radio" id="icl06" name="icl" value="6">
  <label for="icl06">6</label>
</div>
<br />
<div class="rating">
  <input type="radio" id="nlg01" name="nlg" value="1">
  <label for="nlg01">1</label>
  <input type="radio" id="nlg02" name="nlg" value="2">
  <label for="nlg02">2</label>
  <input type="radio" id="nlg03" name="nlg" value="3">
  <label for="nlg03">3</label>
  <input type="radio" id="nlg04" name="nlg" value="4">
  <label for="nlg04">4</label>
  <input type="radio" id="nlg05" name="nlg" value="5">
  <label for="nlg05">5</label>
  <input type="radio" id="nlg06" name="nlg" value="6">
  <label for="nlg06">6</label>
</div>
<br />
<div id="results" class="hidden">
</div>
<div id="errors" class="error">
</div>
<button id="reset">RESET</button>

相关问题
最新问题