特定点击单选按钮启用mvc中的文本框/下拉列表使用jquery

时间:2015-08-19 12:54:28

标签: javascript jquery html asp.net-mvc

我有三个单选按钮和一个下拉列表。 单击第三个单选按钮下拉列表应该出现,否则应该禁用它。如何根据其第三个单选按钮检查condtion' id'在mvc中使用jquery的属性。帮助我,我是一个非常新的jquery ..



    $("document").ready(function () {

        //This is to hide and disable dropdown on page load intially
        $("#ddSectionlsts").prop("disabled", true);
        $("#ddSectionlsts").hide();
 
        $('input:radio').click(function () {

            //This is to hide and disable dropdown on any click of radio button
            $("#ddSectionlsts").hide();
            $("#ddSectionlsts").prop("disabled", true);

            if ($(this).val=="radiospecific") {  //what is suitable condtion to check 
                //on success of condition dropdown is enabled for selection
                $("#ddSectionlsts").show();
                $("#ddSectionlsts").prop("disabled", false);
            }
        });
    });

<body>
  <div>
    @Html.RadioButtonFor(model => model.Name1, new { @id = "radiocomman", @name="type", @class="test_Css" }) Cheque
    @Html.RadioButtonFor(model => model.Name2, new { @id = "radiospecific", @name = "type", @class = "test_css" })Cas
</div>

@*drop down list*@
@{var listItems = new List<ListItem>
    {
          new ListItem { Text = "Exemplo1", Value="Exemplo1" },
          new ListItem { Text = "Exemplo2", Value="Exemplo2" },
          new ListItem { Text = "Exemplo3", Value="Exemplo3" }
    };
}
  
@Html.DropDownList("Exemplo", new SelectList(listItems, "Value", "Text"),new{ @id = "ddSectionlsts", @disabled = "disabled"})
 </body>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

 $('input[name=type]').click(function(){        
        if ($(this).attr('id")=="radiospecific") {
            $("#ddSectionlsts").show();
            $("#ddSectionlsts").prop("disabled", false);
        } else {
            $("#ddSectionlsts").hide();
            $("#ddSectionlsts").prop("disabled", true);

        }
});

答案 1 :(得分:0)

  

你的电台按钮

@Html.RadioButtonFor(model => model.Name1, "Cheque", new { @id = "radiocomman", @name="type", @class="test_Css" }) Cheque
@Html.RadioButtonFor(model => model.Name2, "Cas", new { @id =   "radiospecific", @name = "type", @class = "test_css" })Cas

Your Js

    $('input:radio').click(function(){       
    var radioVal = $('input:radio[name=type]:checked').val();
    if (radioVal == 'Cheque') {
        $("#ddSectionlsts").prop("disabled", false).show();
    }
    else if (radioVal == 'Cas'){
        $("#ddSectionlsts").prop("disabled", false).hide();
    }});

In your Model

public string type { get; set; }

答案 2 :(得分:0)

HTML

<input type="radio" name="rb" class="mrb" id="rButton1" value="rb1">Radio Button 1 <br>
<input type="radio" name="rb" class="mrb" id="rButton2" value="rb2">Radio Button 2 <br>
<input type="radio" name="rb" class="mrb" id="rButton3" value="rb3">Radio Button 3

现在按类名添加点击事件,并在其内部使您了解点击的按钮ID是否与第三个按钮匹配。如果是,那么将你的欲望行动放在循环中。

$('.mrb').click(function(){
    if ($(this).attr('id') == 'rButton3') {
        // put your desire action
    }
});

答案 3 :(得分:0)

对于两个单选按钮,我发现了这个并且它正常工作

&#13;
&#13;
$(document).ready(function () {

        $("#ddSectionlsts").prop("disabled", true);
        $("#ddSectionlsts").hide();
        $('input:radio').click(function () {
            $("#ddSectionlsts").prop("disabled", true);
            $("#ddSectionlsts").hide();
            if ($(this).attr('id') == 'radiospecific') {
                $("#ddSectionlsts").show();
                $("#ddSectionlsts").prop("disabled", false);
                $('#radiocomman').prop('checked', false);
            }
            else
                $('#radiospecific').prop('checked', false);
        });

    });
&#13;
<div>
 @Html.RadioButtonFor(model => model.Name1, "Cheque", new { @id = "radiocomman", @name = "type", @class = "test_Css" }) 
@Html.RadioButtonFor(model => model.Name2, "Cas", new { @id = "radiospecific", @name = "type", @class = "test_css" })

    
</div>

@*drop down list*@
@{var listItems = new List<ListItem>
    {
          new ListItem { Text = "Example1", Value="Example1" },
          new ListItem { Text = "Example2", Value="Example2" },
          new ListItem { Text = "Example3", Value="Example3" }
    };
}
@Html.DropDownList("Example", new SelectList(listItems, "Value", "Text"),new{ @id = "ddSectionlsts", @disabled = "disabled"})
&#13;
&#13;
&#13;