无法根据使用jQuery选择的年份隐藏单选按钮

Question

我尝试使用jquery根据某些条件显示一些单选按钮/按钮。然而，它不起作用。任何人都可以让我知道代码中的错误吗？场景是

1. 如果用户选择2014或2013，则应显示第一个单选按钮
2. 如果用户选择除这些年份之外的其他年份，则根据当前年份与当前年份之间的差异进行选择。选择年份，我需要显示单选按钮的数量。

我的代码是

$('#eForm_registeredDate').change(function() {
    $('#divncb').removeClass('dontshow');
    var that = $(this);
    var currentYear = parseInt(new Date().getFullYear());
    var registeredYear = parseInt(that.val());    
    if(registeredYear == currentYear || currentYear == (registeredYear + 1)) {        
        $( 'input:radio[name="ncbyear"]').not(':eq(0)').hide();
    } else {
        var noNcbYear =  currentYear - registeredYear;
        $( 'input:radio[name="ncbyear"]').not(':gt('+noNcbYear+')').hide();
    }
});

这是我的小提琴

http://jsfiddle.net/5ept4r74/3/

Answer 1

@Twain是对的，你应该用你的raido按钮包裹他们的文本。

当您在每次用户交互时重置对象视图时发生任何更改时，您还需要显示所有无线电。

Here is working jsFiddle

jQuery的：

$('#eForm_registeredDate').change(function() {
    $('#divncb').removeClass('dontshow');
    var that = $(this);
    var currentYear = parseInt(new Date().getFullYear());
    var registeredYear = parseInt(that.val());  

    $('#divncb label').show();//reset view here
    if(registeredYear == currentYear || currentYear == (registeredYear + 1)) {        
        $( 'input:radio[name="ncbyear"]').not(':eq(0)').parent().hide();  
    } else {
        var noNcbYear =  currentYear - registeredYear;
        $( 'input:radio[name="ncbyear"]').not(':gt('+noNcbYear+')').parent().hide();
    }
});

HTML：

<div id="divncb" class="dontshow">
    <label>
         <input type="radio" name="ncbyear" value="0" checked>1 year(0%)
    </label>
    <label>
         <input type="radio" name="ncbyear" value="20">2 years(20%)
    </label>
    <label>
         <input type="radio" name="ncbyear" value="25" checked>3 year(25%)
    </label>
    <label>
         <input type="radio" name="ncbyear" value="35">4 years(35%)
    </label>
    <label>
         <input type="radio" name="ncbyear" value="45" checked>5 year(45%)
    </label>
    <label>
         <input type="radio" name="ncbyear" value="50">&gt; 5 years(50%)
    </label>
 </div>

Answer 2

在范围中包裹广播字段和标签，并在包装​​范围内执行显示和隐藏 的 HTML

  <div id="divncb" class="dontshow">
        <span><input type="radio" name="ncbyear" value="0" checked>1 year(0%)</span>
        <span><input type="radio" name="ncbyear" value="20">2 years(20%)</span>
        <span><input type="radio" name="ncbyear" value="25" checked>3 year(25%)</span>
        <span><input type="radio" name="ncbyear" value="35">4 years(35%)</span>
        <span><input type="radio" name="ncbyear" value="45" checked>5 year(45%)</span>
        <span><input type="radio" name="ncbyear" value="50">&gt; 5 years(50%)</span>
     </div>

JQUERY

$('#eForm_registeredDate').change(function() {
    $('#divncb').removeClass('dontshow');
    var that = $(this);
    var currentYear = parseInt(new Date().getFullYear());
    var registeredYear = parseInt(that.val());    
    $( 'input:radio[name="ncbyear"]').parent().show();
    if(registeredYear == currentYear || currentYear == (registeredYear + 1)) {        
          $( 'input:radio[name="ncbyear"]').not(':eq(0)').parent().hide();
    } else {
        var noNcbYear =  currentYear - registeredYear;
                $( 'input:radio[name="ncbyear"]').not(':gt('+noNcbYear+')').parent().hide();
    }
});  

Answer 3

不确定您正在尝试做什么

var radios = $('input:radio[name="ncbyear"]');
var registeredDate = $('#eForm_registeredDate');
registeredDate.change(function() {
    $('#divncb').removeClass('dontshow');
    var that = $(this);
    var currentYear = parseInt(new Date().getFullYear(),10);
    var registeredYear = parseInt(that.val(),10);
    var diff = (currentYear-registeredYear)>0?(currentYear-registeredYear):1;

    radios.each(function(index,radio){
        if(diff>=index+1)
            $(radio).show();
        else
            $(radio).hide();
    })
});