顯示和隱藏，啓用並根據無線電和複選框禁用

好吧，我改寫了我的問題分爲兩個更小的模塊：顯示和隱藏，啓用並根據無線電和複選框禁用

1）當我們點擊在窗體名稱電子，id爲股利的單選按鈕應該顯示原本隱藏的電子器件。我的這個jquery函數是不正確的。任何指針？

2）在div ID電子進入批量文本框最初應禁用，然後當用戶點擊旁邊name.FOr例如項目的複選框被激活：無線電低於

我的代碼：

<html> 
     <head> 
      <script src="jquery-1.11.0.js"></script> 
      <style> 
       div{display:none} 
      </style> 
     </head> 
     <body> 
      <form> 
      <input type="radio" name="household" id ="electronics" value="electronics">Electronics<br> 
      <input type="radio" name="household" id="cookware" value="cookware">Cookware<br> 
       <input type="radio" name="household" id="both" value="both">Both<br> 
      </form> 
      <script> 
       $(document).ready(function(){ 
        $(input[type="radio"]).click(function(){ 
         $("div").show; 
        }); 
       }); 
      </script> 
      <div id="electronics"> 
       <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1"><br> 
       <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text2"><br> 
</div> 
     </body> 
    </html>

來源

2015-03-19 newbie

使用show（）而不是show。 – 2015-03-19 13:15:55

你是對的！編輯答案 – brunofitas 2015-03-19 13:32:27

該選擇是錯誤的

  $(document).ready(function(){ 
       $('input[type="radio"]').click(function(){ 
        $("div").show(); 
       }); 
      });

或

  $(document).ready(function(){ 
       $(":radio").click(function(){ 
        $("div").show(); 
       }); 
      });

來源

2015-03-19 13:16:36

yipee！有用。現在我可以請求其他幫助...請參考我的問題... – newbie 2015-03-19 13:24:30

看起來你的選擇器是錯誤的，並顯示功能應該是.show()。把這個js代碼放在腳本部分。

回答問題1和2

$(document).ready(function(){ 

    /* question 1 */ 
    $('input[type="radio"]').click(function(){ 
      $("div").show(); 
    }); 

    /* question 2 */ 
    $('input[type="checkbox"]').on('click',function(){    

    if($(this).is(':checked')) 
    { 
     $(this).next().removeAttr('disabled'); 
    } 
    else 
    { 
     $(this).next().attr('disabled','disabled'); 
    } 

    }) 
});

這裏是標記。我改變一點點（隱藏在初始啓動 div和禁用輸入文本。

<body> 
    <form> 
     <input type="radio" name="household" id ="electronics" value="electronics">Electronics<br> 
     <input type="radio" name="household" id="cookware" value="cookware">Cookware<br> 
     <input type="radio" name="household" id="both" value="both">Both<br> 
    </form> 

    <div id="electronics" style="display:none"> 
     <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp;<input type="textbox" name="text1" disabled><br> 
     <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp; 
     <input type="textbox" name="text2" disabled><br> 
</div> 
</body>

來源

2015-03-19 13:23:59

給股利一類，並從收音機中刪除ID，因爲ID必須是唯一的
修復型輸入文本框的輸入=文本。
點擊事件添加到複選框
運行的複選框的測試爲onload禁用/啓用文本字段

$(function() { 
 
    $('input[type="radio"]').on("click",function() { 
 
    $(".selections").hide(); // hide them all 
 
    if (this.value=="both") $(".selections").show(); // show both 
 
    else $("#"+this.value).show(); // show the one with ID=radio value 
 
    }); 
 
    $('.selections input[type="checkbox"]').on("click",function() { 
 
// $(this).next().prop("disabled",!this.checked); // disable if not checked 
 
    $(this).next().toggle(this.checked); // hide if not checked 
 
    }); 
 
    $('.selections input[type="text"]').each(function() { // initialise 
 
//  $(this).prop("disabled",!$(this).prev().is(":checked")); 
 
     $(this).toggle($(this).prev().is(":checked")); 
 
    }); 
 
});

.selections { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio" name="household" value="electronics">Electronics 
 
    <br> 
 
    <input type="radio" name="household" value="cookware">Cookware 
 
    <br> 
 
    <input type="radio" name="household" value="both">Both 
 
    <br> 
 
</form> 
 
<div id="electronics" class="selections"> 
 
    <input type="checkbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp; 
 
    <input type="text" name="text1"> 
 
    <br> 
 
    <input type="checkbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp; 
 
    <input type="text" name="text2"> 
 
    <br> 
 
</div>

來源

2015-03-19 13:25:44 mplungjan

mplungjan，我有點困惑你在jQuery中引用「this」。請在解決方案中查看您的第一個代碼片段。 – newbie 2015-03-20 04:23:33

這是DOM訪問，如果你想堅持使用jQuery，你可以使用$（this）.val（）。我經常使用'this'作爲value和id - 主要用於ID，因爲它是'$（this）.attr（「id」）'或'。道具（「id」）'這是更多的打字 – mplungjan 2015-03-20 05:11:51

你應該以防萬一您在頁面中添加更多單選按鈕使用單選按鈕類...

<input type="radio" name="household" class="myradio" value="electronics">Electronics<br> 
<input type="radio" name="household" class="myradio" value="cookware">Cookware<br> 
<input type="radio" name="household" class="myradio" value="both">Both<br>

同樣在複選框...

<div id="electronics" style="display:none"> 
    <input type="checkbox" class="mycheckbox" value="radio" name="radio">Radio &nbsp;&nbsp;2000&nbsp;&nbsp; 
    <input type="text" id="text_radio" name="text_radio"><br> 
    <input type="checkbox" class="mycheckbox" value="phone" name="phone">Phone&nbsp;&nbsp;2000&nbsp;&nbsp; 
    <input type="text" id="text_phone" name="text_phone"><br> 
</div>

然後在頁面加載並創建點擊功能後立即禁用複選框：

$(document).ready(function(){ 
    // disable all text inputs 
    $(".textbox").prop("disabled", true); 

    $(".myradio").click(function(){ 
     //get value from this radio and show respective div 
     $("#"+$(this).val()).show(); 
     //enable text input from #text_(value) 
     $("#text_"+$(this).val()).prop("disabled", false); 
    }); 

});

來源

2015-03-19 13:26:53 brunofitas

'禁用'在技術上屬於反對屬性的財產。使用'.prop（'disabled'，true）;'代替。請參閱['.prop（）']（http://api.jquery.com/prop/）作爲參考... – War10ck 2015-03-19 13:28:04

編輯，你是對的！ – brunofitas 2015-03-19 13:34:34

顯示和隱藏，啓用並根據無線電和複選框禁用

回答

相關問題