当复选框被选中时允许下拉列表的一个数据

Question

我想知道如何使用 JavaScript 来处理这个问题。当我选中 IsPrimary 的 ccheckbox 时，我会将该下拉数据限制为唯一值，它是该下拉值的唯一主要值。

因此，Contact Type 中的每个值都必须只有一个主要的

这是我的 Cshtml

 <p>
            <label for="ddlContactType">
                Contact Type</label>
            <span>
                @Html.DropDownList("ddlContactType", new SelectList(ViewBag.ContactTypeList, "ID", "Display_Value", ContactType), "[Please Select]",
            new Dictionary<string, object>
            {
                {"class"}
            })
            </span>
        </p>
        <p>
            <label for="txtContactValue">
                Contact Value</label>
            <span>
                <input type="text" id="txtContactValue" name="txtContactValue"  inputLong" value="" />
                <input type="checkbox" name="chkIsPrimary" id="chkIsPrimary" value="true" checked="checked" />
                <label>
                    Is Primary?</label>
            </span>
        </p> 

我只想验证我将如何限制联系人类型值。我只需要 1 IsPrimary 每个下拉列表数据。例如，我添加了一个电子邮件地址并选中了 IsPrimary 复选框，然后当我再次选择电子邮件地址并选中 IsPrimary 复选框时，它将保存。有一个通知，电子邮件地址中只有一个 IsPrimary。

谢谢:D

Answer 1

您可以将数据保存在某个隐藏字段中。比在检查复选框时，使用jquery如果x存在于隐藏的字段中。

例如：

<div id="mydiv" style="display:none;"></div>

$("#mycheckbox").click(function(){

   if ($(this).is(':checked')){ 

      if( $("#mydiv").text() == "something" )
        -- do something --
 }  
});

Answer 2

使用 JQuery：

将“isPrimaryCheckbox”类添加到 IsPrimary 复选框后。

$(document).ready(function() {
   $(".isPrimaryCheckbox").change(function() {
      if($(this).prop("checked")) {
         $(".isPrimaryCheckbox").not(this).prop("checked", false);
      } 
   });
});

每次更改其中一个复选框时，它都会检查它是否已被选中 - 如果是，则取消选中所有其他复选框。

同样的基本原理可以应用在纯 javascript（没有 jQuery）中，但是会更复杂。