To disable all radio button options on page load if any radio button option is selected using jquery

huangapple go评论59阅读模式
英文:

To disable all radio button options on page load if any radio button option is selected using jquery

问题

所以我有一个带有多个单选按钮的屏幕。在初始页面加载时,单选按钮控件所在的页面需要正常显示。但如果选择并保存了,在回发时,单选按钮控件需要被禁用,不能更改。如果单选按钮控件未被选择,则它们应该显示为正常。

这是我的代码。

<div id="divFood">
   @foreach (var fruit in Model)
   {
       <input id="@fruit.Value" type="radio" name="Fruit" value="@fruit.Value"/>
       <label for="@fruit.Value">@fruit.Text</label>
       <br/>
   }
   @foreach (var dairy in Model.Dairy)
   {
       <input id="@dairy.Value" type="radio" name="Dairy" value="@dairy.Value"/>
       <label for="@dairy.Value">@dairy.Text</label>
       <br/>
   }
   @foreach (var veg in Model.Vegetable)
   {
       <input id="@veg.Value" type="radio" name="Veg" value="@veg.Value"/>
       <label for="@veg.Value">@veg.Text</label>
       <br/>
   }
   @foreach (var meat in Model.Meat)
   {
       <input id="@meat.Value" type="radio" name="Meat" value="@meat.Value"/>
       <label for="@meat.Value">@meat.Text</label>
       <br/>
   }
</div>

我的 JQuery 代码如下。问题是我的代码只禁用了所选的单选按钮选项,而不是单选按钮控件。例如,如果在 Meat 单选按钮中选择了 chicken 选项,只有 chicken 被禁用,而不是 Meat 的所有其他选项。我该如何修复它?

$(document).ready(function () {
    $("#divFood input[type=radio]").each(function() {
        if($(this).is(':checked')) {  
            $(this).attr('disabled', 'disabled'); 
        }                       
    });
});
英文:

So I have a screen with multiple radio buttons. On initial page load, the page with radio button controls needs to be displayed regularly. But if selected and saved, on postback the radio button control needs to be disabled and not able to change. If the radio button control was not selected, then they should appear as normal.

This is my code.

&lt;div id=&quot;divFood&quot;&gt;
   @foreach (var fruit in Model)
   {
       &lt;input id=&quot;@fruit.Value&quot; type=&quot;radio&quot; name=&quot;Fruit&quot; value=&quot;@fruit.Value&quot;/&gt;
       &lt;label for=&quot;@fruit.Value&quot;&gt;@fruit.Text&lt;/label&gt;
       &lt;br/&gt;
   }
   @foreach (var dairy in Model.Dairy)
   {
       &lt;input id=&quot;@dairy.Value&quot; type=&quot;radio&quot; name=&quot;Dairy&quot; value=&quot;@dairy.Value&quot;/&gt;
       &lt;label for=&quot;@dairy.Value&quot;&gt;@dairy.Text&lt;/label&gt;
       &lt;br/&gt;
   }
   @foreach (var veg in Model.Vegetable)
   {
       &lt;input id=&quot;@veg.Value&quot; type=&quot;radio&quot; name=&quot;Veg&quot; value=&quot;@veg.Value&quot;/&gt;
       &lt;label for=&quot;@veg.Value&quot;&gt;@veg.Text&lt;/label&gt;
       &lt;br/&gt;
   }
   @foreach (var meat in Model.Meat)
   {
       &lt;input id=&quot;@meat.Value&quot; type=&quot;radio&quot; name=&quot;Meat&quot; value=&quot;@meat.Value&quot;/&gt;
       &lt;label for=&quot;@meat.Value&quot;&gt;@meat.Text&lt;/label&gt;
       &lt;br/&gt;
   }
&lt;/div&gt;

My JQuery code is as follows. The issue is that my code only disables the selected radio button option rather than the radiobutton control. For example, if in Meat radio button, chicken option is selected, Only chicken gets disabled and not all other options of Meat. How do I fix it?

$(document).ready(function () {
    $(&quot;#divFood input[type=radio]&quot;).each(function() {
        if($(this).is(&#39;:checked&#39;)) {  
            $(this).attr(&#39;disabled&#39;, &#39;disabled&#39;); 
        }                       
    });
});

答案1

得分: 2

以下是翻译的内容:

我已经很久没有使用jQuery了,所以不确定如何在jQuery的filtereach中实现,但是使用原生DOM API,您可以像下面这样操作。

首先,我们选择所有的输入元素,然后通过选中的元素进行筛选。接下来,我们遍历筛选后的列表,获取它们的name属性,然后选择与该name匹配的元素并设置其disabled属性。

这可以以几种方式简化,其中一种方式是将每个组装在fieldset中,然后将其设置为禁用。

以下是纯粹的JavaScript代码,但如果有必要,应该可以适应jQuery。

<!-- 开始代码片段:不隐藏JS,显示控制台,不使用Babel转译 -->

<!-- JavaScript代码 -->
const groups = document.querySelectorAll("#divFood input[type=radio]");
[...groups].filter(input => input.checked)
    .forEach(input => [...document.querySelectorAll(`input[name=${input.name}]`)]
        .forEach(el => el.disabled = true)
    );

<!-- HTML代码 -->
<div id="divFood">
    <input id="chicken" type="radio" name="Meat" value="chicken" />
    <label for="chicken">鸡肉</label>
    <br />
    <input id="fish" type="radio" name="Meat" value="fish" />
    <label for="fish">鱼肉</label>
    <br />
    <input id="beef" type="radio" name="Meat" value="beef" checked/>
    <label for="beef">牛肉</label>
    <br />
    <br />
    <input id="beans" type="radio" name="vegitables" value="beans" />
    <label for="beans">豆类</label>
    <br />
    <input id="lettuce" type="radio" name="vegitables" value="lettuce" />
    <label for="lettuce">生菜</label>
    <br />
    <input id="tomatos" type="radio" name="vegitables" value="tomatos"/>
    <label for="tomatos">番茄</label>
    <br />
</div>

<!-- 结束代码片段 -->

希望这能帮助您理解代码的功能。如果您有其他问题,请随时提问。

英文:

I haven't used jQuery in too long so unsure how to do it with JQ's filter and each however with native dom api's you can do something like the following.

First we select all of the inputs, we filter the list by any that are checked. Next we take that filtered list and iterate it grabbing the name then we do a select of any elements which match that name and set the disabled property.

This could be simplified a few ways, one way is you could wrap a fieldset around each group and just set that to disabled.

Below is vanilla JS but should be adaptable to jQuery if necessary.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

	const groups =  document.querySelectorAll(&quot;#divFood input[type=radio]&quot;);
  [...groups].filter(input =&gt; input.checked)
  	.forEach(input =&gt; [...document.querySelectorAll(`input[name=${input.name}]`)]
    	.forEach(el =&gt; el.disabled = true)
  );

<!-- language: lang-html -->

&lt;div id=&quot;divFood&quot;&gt;
  &lt;input id=&quot;chicken&quot; type=&quot;radio&quot; name=&quot;Meat&quot; value=&quot;chicken&quot; /&gt;
  &lt;label for=&quot;chicken&quot;&gt;chicken&lt;/label&gt;
  &lt;br /&gt;
  &lt;input id=&quot;fish&quot; type=&quot;radio&quot; name=&quot;Meat&quot; value=&quot;fish&quot; /&gt;
  &lt;label for=&quot;fish&quot;&gt;fish&lt;/label&gt;
  &lt;br /&gt;
  &lt;input id=&quot;beef&quot; type=&quot;radio&quot; name=&quot;Meat&quot; value=&quot;beef&quot; checked/&gt;
  &lt;label for=&quot;beef&quot;&gt;beef&lt;/label&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;input id=&quot;beans&quot; type=&quot;radio&quot; name=&quot;vegitables&quot; value=&quot;beans&quot; /&gt;
  &lt;label for=&quot;beans&quot;&gt;beans&lt;/label&gt;
  &lt;br /&gt;
  &lt;input id=&quot;lettuce&quot; type=&quot;radio&quot; name=&quot;vegitables&quot; value=&quot;lettuce&quot; /&gt;
  &lt;label for=&quot;lettuce&quot;&gt;lettuce&lt;/label&gt;
  &lt;br /&gt;
  &lt;input id=&quot;tomatos&quot; type=&quot;radio&quot; name=&quot;vegitables&quot; value=&quot;tomatos&quot;/&gt;
  &lt;label for=&quot;tomatos&quot;&gt;tomatos&lt;/label&gt;
  &lt;br /&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

你可以循环遍历已选中的单选按钮,然后在每个循环中获取已选中单选按钮的name属性,以禁用具有相同名称的其他单选按钮。

演示代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divFood">
  <input type="radio" name="Fruit" value="A" />
  <label for="@fruit.Value">A</label>
  <br />
  <input type="radio" name="Fruit" value="B" checked />
  <label for="@fruit.Value">B</label>
  <br />
  <input type="radio" name="Fruit" value="C" />
  <label for="@fruit.Value">C</label>
  <br />
  <input type="radio" name="Meat" value="AM" />
  <label for="@meat.Value">AM</label>
  <br />
  <input type="radio" name="Meat" value="CM" />
  <label for="@meat.Value">CM</label>
  <br />
  <input type="radio" name="Meat" value="PM" />
  <label for="@meat.Value">PM</label>
  <br />
  <input type="radio" name="Veg" value="CMC" checked />
  <label for="@meat.Value">CMC</label>
  <br />
  <input type="radio" name="Veg" value="PMC" />
  <label for="@meat.Value">PMC</label>
  <br />
  <input type="radio" name="Veg" value="PMR" />
  <label for="@meat.Value">PMR</label>
  <br />
</div>
$(document).ready(function() {
  $("#divFood input[type=radio]:checked").each(function() {
    $("input[name=" + $(this).attr('name') + "]").prop("disabled", "true"); //disabled
  });
})
英文:

You can loop through checked radio button and then inside each loop get the name attribute of checked radio to disabled other radio with same name.

Demo Code :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function() {
$(&quot;#divFood input[type=radio]:checked&quot;).each(function() {
$(&quot;input[name=&quot; + $(this).attr(&#39;name&#39;) + &quot;]&quot;).prop(&quot;disabled&quot;, &quot;true&quot;) //disabled
});
})

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;divFood&quot;&gt;
&lt;input type=&quot;radio&quot; name=&quot;Fruit&quot; value=&quot;A&quot; /&gt;
&lt;label for=&quot;@fruit.Value&quot;&gt;A&lt;/label&gt;
&lt;br/&gt;
&lt;input type=&quot;radio&quot; name=&quot;Fruit&quot; value=&quot;B&quot; checked /&gt;
&lt;label for=&quot;@fruit.Value&quot;&gt;B&lt;/label&gt;
&lt;br/&gt;
&lt;input type=&quot;radio&quot; name=&quot;Fruit&quot; value=&quot;C&quot; /&gt;
&lt;label for=&quot;@fruit.Value&quot;&gt;C&lt;/label&gt;
&lt;br/&gt;
&lt;input type=&quot;radio&quot; name=&quot;Meat&quot; value=&quot;AM&quot; /&gt;
&lt;label for=&quot;@meat.Value&quot;&gt;AM&lt;/label&gt;
&lt;br/&gt;
&lt;input type=&quot;radio&quot; name=&quot;Meat&quot; value=&quot;CM&quot; /&gt;
&lt;label for=&quot;@meat.Value&quot;&gt;CM&lt;/label&gt;
&lt;br/&gt;
&lt;input type=&quot;radio&quot; name=&quot;Meat&quot; value=&quot;PM&quot; /&gt;
&lt;label for=&quot;@meat.Value&quot;&gt;PM&lt;/label&gt;
&lt;br/&gt;
&lt;input type=&quot;radio&quot; name=&quot;Veg&quot; value=&quot;CMC&quot; checked /&gt;
&lt;label for=&quot;@meat.Value&quot;&gt;CMC&lt;/label&gt;
&lt;br/&gt;
&lt;input type=&quot;radio&quot; name=&quot;Veg&quot; value=&quot;PMC&quot; /&gt;
&lt;label for=&quot;@meat.Value&quot;&gt;PMC&lt;/label&gt;
&lt;br/&gt;
&lt;input type=&quot;radio&quot; name=&quot;Veg&quot; value=&quot;PMR&quot; /&gt;
&lt;label for=&quot;@meat.Value&quot;&gt;PMR&lt;/label&gt;
&lt;br/&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月15日 00:42:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76475812-2.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定