在选择另一个单选按钮时启用/禁用单选按钮

时间:2014-04-23 07:14:06

标签: jquery sql-server html5 asp.net-mvc-4

Radio buttons
Groups
{

        <div>
            @Html.RadioButtonFor(model => model.groups, "Parts", new { id = "Parts",@class="groupsRadio", @style = "width:auto;background:none;border:none" })<span>Parts</span>
            @Html.RadioButtonFor(model => model.groups, "Labor", new { id = "Labor",@class="groupsRadio", @style = "width:auto;background:none;border:none" })<span>Labor</span>                     
            @Html.RadioButtonFor(model => model.groups, "Tax", new { id = "Tax",@class="groupsRadio", @style = "width:auto;background:none;border:none" })<span>Tax</span>
            @Html.RadioButtonFor(model => model.groups, "Other", new { id = "Other",@class="groupsRadio", @style = "width:auto;background:none;border:none" })<span>Other</span>       
            @Html.ValidationMessageFor(model => model.groups) 
        </div>
    }


   Radio Buttons Group Type
    {
      <div>

             @Html.RadioButtonFor(model => model.groupType, "None", new { id = "None", @style = "width:auto;background:none;border:none" })<span>None</span>
            @Html.RadioButtonFor(model => model.groupType, "Labor", new { id = "Labor", @style = "width:auto;background:none;border:none" })<span>Labor</span>
            @Html.RadioButtonFor(model => model.groupType, "Refinishing", new { id = "Refinishing", @style = "width:auto;background:none;border:none" })<span>Refinishing</span>
            @Html.RadioButtonFor(model => model.groupType, "Sublet", new { id = "Sublet", @style = "width:auto;background:none;border:none" })<span>Sublet</span>                     
            @Html.RadioButtonFor(model => model.groupType, "Miscellaneous", new { id = "Miscellaneous", @style = "width:auto;background:none;border:none" })<span>Miscellaneous</span>

            @Html.ValidationMessageFor(model => model.groupType) 
        </div>
    }

现在

1.选择单选按钮&#39;其他&#39;我必须禁用单选按钮组Type&#39; Labor&#39;和&#39;修补&#39;

  1. 选择税收&#39;仅启用&#39;无&#39;
  2. 选择&#39; Labor&#39;禁用&#39; Sublet&#39;和&#39;其他&#39;
  3. 选择&#39;部分&#39;仅启用&#39;无&#39;
  4. 请帮助为此编写jQuery ..我是初学者 提前致谢

2 个答案:

答案 0 :(得分:0)

这是让你入门的事情......

$("#Other").click(function(){
    $('#Labor,#Refinishing').prop('disabled',true);
});
$("#Parts,#Labor,#Tax").click(function(){
    $('#Labor,#Refinishing').prop('disabled',false);
});
$("#Tax").click(function(){
    $('#None').prop('disabled',false);
    $('#Labor,#Refinishing,#Sublet,#Miscellaneous').prop('disabled',true);
});

您可以为其余的要求做同样的事情。

答案 1 :(得分:0)

添加data-display_id attribute之类的,

<div>
   @Html.RadioButtonFor(..., new {data-display_id='#None', id = "Parts",... })<span>Parts</span>
   @Html.RadioButtonFor(..., new {data-display_id='#Sublet,#Miscellaneous', id = "Labor",... })<span>Labor</span>                     
   @Html.RadioButtonFor(..., new {data-display_id='#None', id = "Tax",....})<span>Tax</span>
   @Html.RadioButtonFor(..., new {data-display_id='#Labor,#Refinishing', id = "Other"... })<span>Other</span>       
   @Html.ValidationMessageFor(model => model.groups) 
</div>

<强> SCRIPT

$('[type="radio"][data-display_id]').click(function(){
    $($(this).data('display_id')).prop('disabled',true);
});