在 Jquery 的单选列表控件中禁用单选按钮答案

【问题标题】：Disable radio button in Radio List Control in Jquery在 Jquery 的单选列表控件中禁用单选按钮
【发布时间】：2017-05-31 06:58:00
【问题描述】：

我必须根据条件从给定的 Radio 列表控件中禁用单选按钮。问题是单选按钮列表是由 CMS 自动生成的，并且所有列表项的 id 都相同。我如何根据条件应用“禁用”类。比如 if (some value == am) 然后显示第一个单选按钮并禁用其他两个。

<div class="fieldset">       
 <div class="radio">
            <label >
                <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value="Morning (8 AM - 1 PM)">
                <span class="disable">Morning (8 AM - 1 PM)</span>
            </label>
        </div>
        <div class="radio">
            <label>
                <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Afternoon (1 PM - 5 PM)" aria-invalid="false">
                <span> Afternoon (1 PM - 5 PM)</span>
            </label>
        </div>
        <div class="radio">
            <label>
                <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Evening (5 PM - 9 PM)">
                <span> Evening (5 PM - 9 PM)</span>
            </label>
        </div>
</div>
</div>

【问题讨论】：

它由 Sitecore 为营销人员生成的 Web 表单。它生成相同的 id

标签： javascript jquery radiobuttonlist disabled-input

【解决方案1】：

不是一个好主意，但您可以使用 jquery 通过 value 属性的值选择收音机并禁用相关收音机（使用 prop 方法）：

$('input[type="radio"][value=" Afternoon (1 PM - 5 PM)"]').prop('disabled', true);
$('input[type="radio"][value=" Evening (5 PM - 9 PM)"]').prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fieldset">       
  <div class="radio">
    <label >
      <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value="Morning (8 AM - 1 PM)">
      <span class="disable">Morning (8 AM - 1 PM)</span>
    </label>
  </div>
  <div class="radio">
    <label>
      <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Afternoon (1 PM - 5 PM)" aria-invalid="false">
      <span> Afternoon (1 PM - 5 PM)</span>
    </label>
  </div>
  <div class="radio">
    <label>
      <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Evening (5 PM - 9 PM)">
      <span> Evening (5 PM - 9 PM)</span>
    </label>
  </div>
</div>

【讨论】：

【解决方案2】：

$(document).ready(function(){
var testString="Afternoon (1 PM - 5 PM)";//show only this text control and hide other control

  $.each($('input[type=radio]'),function(i,v){
  if($.trim($(v).val())!=testString)// any condtion you can put here
    {
    $(v).addClass("disable").next().addClass("disable");
    }
  });
});

.disable
{
 display : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="fieldset">       
 <div class="radio">
            <label >
                <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value="Morning (8 AM - 1 PM)">
                <span class="">Morning (8 AM - 1 PM)</span>
            </label>
        </div>
        <div class="radio">
            <label>
                <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Afternoon (1 PM - 5 PM)" aria-invalid="false">
                <span> Afternoon (1 PM - 5 PM)</span>
            </label>
        </div>
        <div class="radio">
            <label>
                <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Evening (5 PM - 9 PM)">
                <span> Evening (5 PM - 9 PM)</span>
            </label>
        </div>
</div>
</div>

【讨论】：