Wie können wir Radio-Button reparieren sollte nicht ausgewählt werden, wenn die Werte gleich sind

Question

Ich habe Problem, Radio-Button zu wählen, nicht ausgewählt werden, wenn zwei Radio-Button-Werte sind gleich in jquery UI-Taste gesetzt.

Dies ist mein Code:

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

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

Answer 1

Nach dem, was wollten Sie tun, ich kam mit dem unten nach oben, auf die Schaltflächen, deren Werte bereits aktiviert, deaktiviert.

Es gibt eine Chance, wo die Antworten können nicht mehr geändert werden (wenn alle Zahlen, die bereits ausgewählt sind)

$(".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>