Question

我有一个radiobuttonfor列表，如果答案ID是4（如＆＃34;其他＆＃34;我们可以输入详细信息的选项），则会显示一个文本框以输入＆＃34;其他＆＃34 ;细节。所以我想首先禁用该文本框，并仅在用户按下answerID 4即＆＃34;其他＆＃34;选项。怎么做？

我做的是：

 @for (int i = 0; i < Model.DemoQ1Answers.Count(); i++)
                {

                        <div class="col-md-4">

                            @Html.RadioButtonFor(m => Model.selectedAnswerIDforQ1, Model.DemoQ1Answers[i].AnswerID, new { @onclick = "onQ1RadioChanged()" })
                            @Model.DemoQ1Answers[i].AnswerDescription
                            @Html.HiddenFor(m => Model.DemoQ1Answers[i].AnswerID)
                            @Html.HiddenFor(m => Model.DemoQ1Answers[i].AnswerDescription)
                            @if (Model.DemoQ1Answers[i].AnswerID == 4)
                            {

                                @Html.TextBoxFor(m => Model.DemoQ1Answers[i].DemoQ1Other, new { disabled = "disabled" })
                            }

                        </div>

                }

如何知道radiobutton对该onclick函数的值，以便我可以检查函数调用中的值以启用文本框。

以下是我的javascript代码：

<script type="text/javascript">

$(document).ready(function () {

    //alert("inside javascript ");
});

  function onQ1RadioChanged() {
       alert ('(@(Model.selectedAnswerIDforQ1))')
        alert("onQ1RadioChanged called");

        if (@(Model.selectedAnswerIDforQ1)== 4) {
            //enable textbox ??
        }
    }

此代码甚至不调用onQ1RadioChanged方法，甚至不显示任何警报。

开发人员工具的代码：

<p>What is your highest level of education?</p>
            <div class="row">

                        <div class="col-md-4">

                            &nbsp;&nbsp;&nbsp;
                            <input id="selectedAnswerIDforQ1" name="selectedAnswerIDforQ1" onclick="onQ1RadioChanged()" type="radio" value="1" />
                            Undergraduate Degree (Baccalaureate)
                            <input data-val="true" data-val-number="The field AnswerID must be a number." data-val-required="The AnswerID field is required." id="DemoQ1Answers_0__AnswerID" name="DemoQ1Answers[0].AnswerID" type="hidden" value="1" />
                            <input id="DemoQ1Answers_0__AnswerDescription" name="DemoQ1Answers[0].AnswerDescription" type="hidden" value="Undergraduate Degree (Baccalaureate)" />


                        </div>
                        <div class="col-md-4">


                            <input id="selectedAnswerIDforQ1" name="selectedAnswerIDforQ1" onclick="onQ1RadioChanged()" type="radio" value="2" />
                            Master’s Degree
                            <input data-val="true" data-val-number="The field AnswerID must be a number." data-val-required="The AnswerID field is required." id="DemoQ1Answers_1__AnswerID" name="DemoQ1Answers[1].AnswerID" type="hidden" value="2" />
                            <input id="DemoQ1Answers_1__AnswerDescription" name="DemoQ1Answers[1].AnswerDescription" type="hidden" value="Master’s Degree" />


                        </div>

                        <div class="col-md-4">

                            &nbsp;&nbsp;&nbsp;
                            <input id="selectedAnswerIDforQ1" name="selectedAnswerIDforQ1" onclick="onQ1RadioChanged()" type="radio" value="4" />
                            Other:
                            <input data-val="true" data-val-number="The field AnswerID must be a number." data-val-required="The AnswerID field is required." id="DemoQ1Answers_3__AnswerID" name="DemoQ1Answers[3].AnswerID" type="hidden" value="4" />
                            <input id="DemoQ1Answers_3__AnswerDescription" name="DemoQ1Answers[3].AnswerDescription" type="hidden" value="Other:" />

                        <input disabled="disabled" id="DemoQ1Answers_3__DemoQ1Other" name="DemoQ1Answers[3].DemoQ1Other" type="text" value="" />

                        </div>
            </div>

Answer 1

使用JavaScript，您可以绑定HTML元素＆＃39;触发事件来调用函数。所以快速一步一步：

捕获您想要收听的所有单选按钮以进行更改
循环遍历NodeList集合，以单独绑定元素的eventListener，以便更改＆＃39;
当发生更改时，请求JavaScript触发一个函数（将参数发送回函数，更容易将调用嵌套在匿名函数中）
从那里，您可以使用单选按钮的值来实现您的功能 - 应用您选择的逻辑。

＆＃13;

web service asmx

＆＃13;

// Use JS to capture all of your Radio Buttons
const radioButtons = document.getElementById('test').querySelectorAll('input[type="radio"][name="radioTest"]');
// Get the textbox
const txtBox = document.getElementById('txtBox');

for( let radioBtn of radioButtons ){
  // Loop through and bind each radio button to trigger
  // the function on the change event
  radioBtn.addEventListener('change', function(){
    onQ1RadioChanged( this.value, this.checked ) 
  });
}

function onQ1RadioChanged( val, check ){
  // Do something with the val(ue)
  // Input comes back as a string
  if( val === '4' ){
    txtBox.disabled = false;
  }else{
    txtBox.disabled = true;
  }
}

＆＃13;

input[disabled]{ background-color: #F7F7F7; }

＆＃13;

刚才回顾ASP提供的代码 - ＆gt; HTML输出......

如果这是您想要的输出，那么您需要更新您的onclick以传递<div id="test"> <label>Radio 1<input type="radio" name="radioTest" id="radio1" value="1" /></label> <br /> <label>Radio 2<input type="radio" name="radioTest" id="radio2" value="2" /></label> <br /> <label>Radio 3<input type="radio" name="radioTest" id="radio3" value="3" /></label> <br /> <label>Radio 4<input type="radio" name="radioTest" id="radio4" value="4" /></label> <br /> <input type="text" id="txtBox" disabled/> <br /> </div>关键字（它将传回对JavaScript中HTML元素的引用）

this

然后在JavaScript中，设置函数以接收表示元素的参数...

<input type="radio" onclick="onQ1RadioChanged( this );" ... />

然后在函数内部，您可以引用单选按钮的值......

function onQ1RadioChanged( element ){ ... }

如何将radiobutton的值传递给onclick方法

1 个答案: