Question

我正在开发一个表单，我需要能够在选择“是”时激活灰色部分，并在选择“否”时禁用它。如果代码可以压缩并变得更简单也会很棒。

$(document).ready(function() {
    $("input:radio[name^='event-type-']").prop( "disabled", true );
    $('#submit').css('color','#ccc');

    $("input:radio[class^='yes-']").click(function() {
        var n= "#"+$(this).parent().attr('id');
        if ($(this).is(':checked')){
            $(n+' input:radio').prop( "disabled", false );
            $('#submit').css('color','#000');
        }

        $("input:radio[class^='no-']").click(function() {
            var n= "#"+$(this).parent().attr('id');
            if ($(this).is(':checked')){
                $(n+' input:radio').prop( "disabled", true );
                $('#submit').css('color','#ccc');
            }else {
                $(n+' input:radio').prop( "disabled", true );
                $(n+' input:radio').prop( "checked", false );
                $('#submit').css('color','#ccc');
            }
        });

    });

});

https://jsfiddle.net/artboycat/pkt7ws69/2/

Answer 1

按照您的代码，这可能会解决它：

＆＃13;

$(document).ready(function() {
    $("input:radio[name^='event-type-']").prop( "disabled", true );
    $('#submit').css('color','#ccc');

  	$("input:radio[class^='yes-']").click(function() {
    	  var n= "#"+$(this).parent().attr('id');
      	if ($(this).is(':checked')){
        	   $(n+' input:radio').prop( "disabled", false );
          	 $('#submit').css('color','#000');
     		}
    });
    
  	$("input:radio[class^='no-']").click(function() {
      	var n= "#"+$(this).parent().attr('id');
      $(n+' input:radio').prop( "disabled", true );
      $(n+' input:radio').prop( "checked", false );
      $('#submit').css('color','#ccc');
      $("input:radio[class^='yes-']").prop( "disabled", false );
      $("input:radio[class^='no-']").prop( "disabled", false );
      $("input:radio[class^='no-']").prop( "checked", true );
    });

  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grps" id="grps1">
 
 <input type="radio" name="1" class="yes-1" value=1>yes 
 <input type="radio" name="1" class="no-1" value=2>no

<fieldset id="submit">
<legend>Event Type*</legend>
<ul>
<li>Please check event type that best describes your event</li>
<li>This form must be submitted two weeks prior to event date</li>
</ul>


<input type="radio" value="1" name="event-type-1" id="etype-1" class="input-float-left"><label for="etype-1" class="label-longer">&nbsp;Meeting</label>   
 <br>
<input type="radio" value="2" name="event-type-2" id="etype-2" class="input-float-left"><label for="etype-2" class="label-longer">&nbsp;Seminar</label>  
<br>
<input type="radio" value="3" name="event-type-3" id="etype-3" class="input-float-left"><label for="etype-3" class="label-longer">&nbsp;Panel</label> 
 <br>
<input type="radio" value="4" name="event-type-4" id="etype-4" class="input-float-left"><label for="etype-4" class="label-longer">&nbsp;Training</label>   
 <br>
<input type="radio" value="5" name="event-type-5" id="etype-5" class="input-float-left"><label for="etype-5" class="label-longer">&nbsp;Symposium</label>  
<br>




<input type="radio" value="9" name="event-type-6" id="etype-9" class="input-float-left"><label for="etype-9" class="label-longer">&nbsp;Other</label>
<div id="show-me"><TEXTAREA COLS="60" ROWS="4" name="other_item" id="etype-9" maxlength="80" size="25" class="input"></TEXTAREA></div>  

</fieldset>
</div>
 
 <BR clear="all">
<br>

＆＃13;

这不是最好的方法，但应该适合你。

Answer 2

你几乎拥有它，但你也禁用了是/否按钮，你的选择器与textarea不匹配。

现在，为了更简单的代码，请参阅此updated fiddle：

$(document).ready(function() {
  $('#submit *').prop( "disabled", true );
  $('#submit *').css('color','#ccc');

  $("input:radio[class^='yes-']").click(function() {
    $('#submit *').prop( "disabled", false );
    $('#submit *').css('color','#000');
  });
  $("input:radio[class^='no-']").click(function() {
    $('#submit *').prop( "disabled", true );
    $('#submit input').prop( "checked", false );
    $('#submit textarea').prop( "value", "");
    $('#submit *').css('color','#ccc');
  });
});

我改变了什么？

我更改了CSS选择器以匹配“ID为submit”的元素下面的所有内容（这是您的fieldset）。这不包括您的是/否按钮，但包括之前省略的textarea。
当单选按钮发送点击事件时，会自动检查该事件，因此您无需检查is(':checked')。
类似地，您的上一个else分支从未被调用。
我现在正在清除textarea。
我将第二个click功能移到第一个以外。

Answer 3

$('input[name="1"]').click(function() {
  var value = $(this).val();
  if (value === "2") {
    $('#submit input, textarea').prop('disabled', true);
    $('#submit').css('color', '#ccc');
  } else {
    $('#submit input, textarea').prop('disabled', false);
    $('#submit').css('color', '#000');
  }
});

单击否（值为2）时，将禁用所有输入和文本区域，并将字体颜色更改为灰色。当您单击是（值1）时，它会启用它并使字体变黑。

禁用单选按钮

3 个答案: