輸入提交在第一組複選框選中後是無效的

我有一個包含很多輸入組的窗體，並且除了第一個活動的組以外，它們都是隱藏的。提交按鈕實際上是下一個組，並且它應該在禁用的任何組中。我的問題是，在檢查了第一組輸入後，提交按鈕（nextbutton）保持活動狀態，這是不正確的。誰能幫忙？輸入提交在第一組複選框選中後是無效的

<html> 
    <p>Button should be enabled if at least one checkbox is checked</p> 
     <div class="grp1"> 
      <div> 
       <input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label> 
      </div> 
      <div> 
       <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label> 
      </div> 
      <div> 
       <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label> 
      </div> 
      <div> 
       <input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label> 
      </div> 
      <div> 
       <input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label> 
      </div> 
     </div> 

     <h1>group 2 is hidden and will be display after group 1 input is checked and 
      button should be enabled if at least one check_box is checked</h1> 
     <div class="grp2 " style="display:none;"> 
      <div> 
       <input type="check_box" name="option-1" id="option-1"> <label for="option-1">Option 1</label> 
      </div> 
      <div> 
       <input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label> 
      </div> 
      <div> 
       <input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label> 
      </div> 
      <div> 
       <input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label> 
      </div> 
      <div> 
       <input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label> 
      </div> 
     </div> 

     <p>the submit button only appears if a group has a class=hasSubmit. and disabled only if a checkbox checked</p> 
     <p>the problem is, after grp1 is checked and next to grp2 the submit button is undisabled</p> 
     <input class="nextButton" type="submit" value="Do thing" disabled> 
    </div> 
</html>

這是代碼

var checkboxes = $("input[type='checkbox']"), 
submitButt = $("input[type='submit']"); 

checkboxes.click(function() { 
    submitButt.attr("disabled", !checkboxes.is(":checked")); 
});

來源

2015-11-09 Wandaga1

是否要在所有複選框被選中後禁用提交按鈕？ – KeepMove

不，我希望它在複選框被欺騙後可以移動到下一個輸入組，但在下一個組中，它應該也被禁用，直到複選框被選中。直到最終提交表格 – Wandaga1

你能提供小提琴演示嗎？ – KeepMove

以下是我從你的問題理解： -

默認情況下只一個組是可見的，並且按鈕被禁用。
當組1的任何複選框被選中時，該按鈕應該被啓用。
單擊按鈕組2變爲可見，並且再次禁用該按鈕。
如果未選中任何可見組的所有複選框，則應再次禁用按鈕。

基於此，您需要做的是在啓用下一部分後單擊它時禁用該按鈕。

$('input:checkbox').change(function() { 
    var doEnableButton = true; 
    $('div.hasSubmit:visible').each(function() { 
     if ($(this).find('input:checked').length === 0) { 
      doEnableButton = false; 
      return false; //break 
     } 
    }); 

    if (doEnableButton) { 
     $('.nextButton').prop('disabled', false); 
    } else { 
     $('.nextButton').prop('disabled', true); 
    } 
}); 

$('.nextButton').click(function (e) { 
    e.preventDefault(); 

    if ($('.hasSubmit:hidden').length > 0) { 
     $('.hasSubmit:hidden:first').show(); 
     $('.nextButton').prop('disabled', true); 
    } else { 
     //Submit the page 
     alert('Page submitted'); 
    } 
});

出於演示的目的，我搬到了div.hasSubmit裏面的標題（h1）。我還在以下jsFiddle中添加了三個部分（即3 div.hasSubmit）：here

來源

2015-11-10 03:17:23 Taleeb

Taleeb我認爲你是我需要的，但需要首先證明它。 – Wandaga1

當然。不要忘記檢查[jsFiddle]（https://jsfiddle.net/taleebanwar/btmsnxeq/1/）。如有任何疑問，請通知我 – Taleeb

嗨非常感謝您的想法，我不得不做一些小的修改，就是這樣。謝謝。 – Wandaga1

首先，糾正你的HTML佈局，並把你的提交按鈕，每個組的包裝，而你的情況是與類名hasSubmit元素的內部。

然後通過遍歷父容器，像這樣找到它的複選框click事件：

var checkboxes = $("input[type='checkbox']"); 

checkboxes.on("click", function() { 
    // read it when checkbox click event is fired, instead of on page load 
    var submitButt = $(this) 
        .closest(".hasSubmit") 
        .find("input[type='submit']"); 
    submitButt.attr("disabled", !checkboxes.is(":checked")); 
});

FIDDLE

來源

2015-11-10 00:17:33 KeepMove

輸入提交在第一組複選框選中後是無效的

回答

相關問題