更改已禁用複選框的值

所以我碰到了一個小麻煩。我有一個頁面，其中顯示了一個複選框但被禁用（由於數據庫驅動，用戶無法更改它的值）。在此複選框下方，我有一個自動填充字段。如果來自自動完成的項目回來，我需要能夠切換禁用複選框的值。不過，目前我無法這樣做。更改已禁用複選框的值

這是我的代碼到目前爲止。

查看

... 
<tr> 
     <td class="adminTitle"> 
      @Html.NopLabelFor(model => model.IsSpecialOrder): 
     </td> 
     <td class="adminData"> 
      @Html.DisplayFor(model => model.IsSpecialOrder) 
      @Html.HiddenFor(model => model.IsSpecialOrder) 
     </td> 
    </tr> 
    <tr> 
     <td class="adminTitle"> 
      @Html.NopLabelFor(model => model.ItemNumber): 
     </td> 
     <td class="adminData"> 
      @if (Model.Id > 0) 
      { 
       @Html.DisplayFor(model => model.ItemNumber) 
      } 
      else 
      { 
       @Html.EditorFor(model => model.ItemNumber) 
      } 
     </td> 
    </tr> 
... 

<script type="text/javascript"> 
... 
$("#ItemNumber").autocomplete({ 
      minLength: 2, 
      source: function (request, response) { 
       var itemNumber = $("#ItemNumber").val(); 
       //Get available Products based on search parameter and map data 
       $.getJSON('@Url.Action("GetProductsByItemNumber", "PurchaseOrder")', { searchProduct: itemNumber }, function (data) { 
        for (var i = 0; i < data.length; i++) { 
         productData.push({ 'Id': data[i].Id, 'Name': data[i].Name, 'ItemNumber': data[i].ItemNumber, 'Description': data[i].Description, 
          'IsSpecialOrder': data[i].IsSpecialOrder 
         }); 
        } 
        response($.map(data, function (item) { 
         return { 
          value: item.ItemNumber, 
          id: item.Id 
         }; 
        })); 
       }) 
      }, 
      select: function (event, ui) { 
       if (ui.item.id == 0) { 
        //Do some house cleaning and alert user to mistake 
        alert("You must retry your search for a Product"); 
        $("#Name").val(""); 
        $("#ItemNumber").val(""); 
        $(".ProductDescription").html(""); 
        document.getElementById("@Html.FieldIdFor(model => model.IsSpecialOrder)").checked = false; 
        //$("#IsSpecialOrder").prop("checked", false); 

        return false; 
       } 

       //Record ProductId 
       $("#ProductId").val(ui.item.id); 

       //Fill RequestorExt with correct data 
       var description = GetData(productData, ui.item.id, "desc"); 
       var name = GetData(productData, ui.item.id, "name"); 
       var isSpecialOrder = GetData(productData, ui.item.id, "is"); 
       $(".ProductDescription").html(description); 
       $("#Name").val(name); 
       document.getElementById("@Html.FieldIdFor(model => model.IsSpecialOrder)").checked = isSpecialOrder; 
       //$("#IsSpecialOrder").prop("checked", isSpecialOrder); 
      } 
     }); 
... 
</script>

從我一直在讀什麼，禁用字段無法不啓用改變。我猜這是解決這個問題的唯一方法，但首先要確保。有任何想法嗎？

來源

2013-04-04 IyaTaisho

從我一直在讀什麼，禁用字段不能爲沒有使能。我猜這是解決這個問題的唯一方法，但首先要確保。有任何想法嗎？

已禁用的字段肯定可以更改see this fiddle。仔細檢查你的js代碼中是否有正確的值。

供參考（相同的代碼，這是對小提琴）：

<input type="checkbox" disabled="disabled" checked="checked" id="chkbox"/> 
<input type="button" value="Toggle" id="toggle"/> 

var chkBox = $("#chkbox"); 
$("#toggle").click(function(){   
    if (chkBox.is(':checked')) {   
     chkBox.prop('checked', false); 
    } 
    else {   
     chkBox.prop('checked', true); 
    } 

});

來源

2013-04-04 14:59:39

非常感謝！問題是我使用@ Html.DisplayFor的事實。當我切換到複選框類型的輸入時，它對我來說非常合適。愚蠢的DisplayFor似乎總是引起我的問題了。 – IyaTaisho 2013-04-04 17:25:15

不客氣，很高興它的工作。我總是按照html的方式來做，所以那些對剃刀語法感到頭疼的UI用戶。 – 2013-04-04 17:39:30

哈哈，是的。 Razor很好，除了有一些嚴重的缺陷時，他們在使用jQuery/javascript時不會提醒你。 – IyaTaisho 2013-04-05 15:08:50

如果複選框處於啓用或禁用狀態，則無關緊要。你應該從複選框去除，而不是設置它的checked屬性設置爲false checked屬性，否則將保持選中狀態：

document.getElementById("@Html.FieldIdFor(model => model.IsSpecialOrder)").removeAttribute('checked');

例子：http://jsbin.com/izonur/2/edit

來源

2013-04-04 14:59:34 Vadim

禁用的項目不被形式submited http://www.w3.org/TR/html401/interact/forms.html#h-17.12

你可以有被submited與形式（完全相反只讀項目你想要什麼）

我想你是通過JavaScript以某種方式提交表單不正確。提交時必須從表單中刪除禁用的項目，因此它會相應地工作。

來源

2013-04-04 15:09:17

這聽起來更接近我正在閱讀的內容。該複選框是表單的一部分。我會試着拿出來看看會發生什麼。 – IyaTaisho 2013-04-04 15:20:23

更改已禁用複選框的值

回答

相關問題